6

В базовой сборке create-react-app можно инкапсулировать CSS, добавив .module.

Плюс после сборки к ним применяется методология БЕМ, какие модули или еще что для этого нужны в webpack?

1 ответ 1

5
+50

Вариант ниже предполагает использование как модульной так и не модульной загрузки стилей.

Лоадеры:

style-loader
css-loader
sass-loader    
// для autoprefixer и т.п
postcss-loader 

Конфиг:

const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/
const postcssConfigPath = "postcss.config.js"

module.exports = {
  module: {
    rules: [
      {
        test: sassRegex,
        use: [
          require.resolve("style-loader"),
          {
            loader: require.resolve("css-loader"),
            options: {
              importLoaders: 1
            }
          },
          {
            loader: require.resolve("postcss-loader"),
            options: {
              config: {
                path: postcssConfigPath
              }
            }
          },
          {
            loader: require.resolve("sass-loader")
          }
        ],
        include: sassModuleRegex
      },
      {
        test: sassRegex,
        use: [
          require.resolve("style-loader"),
          {
            loader: require.resolve("css-loader"),
            options: {
              importLoaders: 1
            }
          },
          {
            loader: require.resolve("postcss-loader"),
            options: {
              config: {
                path: postcssConfigPath
              }
            }
          },
          {
            loader: require.resolve("sass-loader")
          }
        ],
        exclude: sassModuleRegex
      },
      {
        test: cssRegex,
        use: [
          require.resolve("style-loader"),
          {
            loader: require.resolve("css-loader")
          },
          {
            loader: require.resolve("postcss-loader"),
            options: {
              config: {
                path: postcssConfigPath
              }
            }
          }
        ],
        include: cssModuleRegex
      },
      {
        test: cssRegex,
        use: [
          require.resolve("style-loader"),
          {
            loader: require.resolve("css-loader")
          },
          {
            loader: require.resolve("postcss-loader"),
            options: {
              config: {
                path: postcssConfigPath
              }
            }
          }
        ],
        exclude: cssModuleRegex
      }
    ]
  }
}

так же для каждого загрузчика можно добавить source-map'ы и настроить обезличивание имен классов:

{
  loader: require.resolve("css-loader"),
  options: {
    sourceMap: true,
    importLoaders: 1,
    modules: {
      localIdentName: "z[hash:base64]"
    }
  }
}

названия которых будут "собираться" из того что будет указано:

localIdentName: "[path][name]__[local]--[hash:base64:5]"

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.