How to configure CSS module in webpack without create-react-app?

Question

How to configure CSS module in webpack without create-react-app?

In the base assembly create-react-app, you can encapsulate CSS by adding .module.

Plus, after the build, the BEM methodology is applied to them, what modules or other things are needed for this in webpack?

6

css reactjs webpack create-react-app config

Author: Vasily, 2020-09-03

Source

1 answers

score 5 · Accepted Answer

The option below assumes the use of both modular and non-modular style loading.

Loaders:

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

Config:

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
      }
    ]
  }
}

You can also add source-maps for each loader and configure depersonalization of class names.:

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

The names of which will be "collected" from what will be specified:

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