Modifying localIdentName in css-loader doesn't work in webpack 5 react 17

Question

Currently I am using webpack 5, react 17 and @dr.pogodin/babel-plugin-react-css-modules and all other latest packages.

I am excluding the sass/css files in assets/stylesheets which is being treated as global and using those classes inside className

Styles won't be applied changing localIdentName to something else. Tried getLocalIdent but no use.

Github Repo Link

So how to change the localIdentName ?

package.json

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "React Template App",
  "author": "",
  "license": "ISC",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "date-fns": "^2.16.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@dr.pogodin/babel-plugin-react-css-modules": "^6.0.10",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^5.0.0-beta.1",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.1",
    "postcss-scss": "^3.0.4",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isDev = process.env.NODE_ENV === "development";

console.log(Environment: ${isDev ? "development" : "production"});

module.exports = {
  entry: "./index.js",
  mode: isDev ? "development" : "production",
  output: {
    path: path.join(__dirname, "dist"),
    publicPath: "/",
    filename: "bundle.js",
  },
  devServer: {
    compress: true,
    open: true,
    hot: true,
    historyApiFallback: true,
    quiet: false,
    stats: "errors-warnings",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(css|sass|scss|less)$/,
        use: [
          isDev ? "style-loader" : MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                auto: (resourcePath) =>
                  resourcePath.indexOf("assets/stylesheets") === -1,
                  localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
                  // getLocalIdent: (context, localIdentName, localName, options) => {
                  //   return "whatever_random_class_name";
                  // },
              },
              sourceMap: isDev,
            },
          },
          "sass-loader"
        ],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
      favicon: "./public/favicon.ico",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    })
  ],
  devtool: isDev ? "source-map" : false,
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@dr.pogodin/babel-plugin-react-css-modules",
      {
        "webpackHotModuleReloading": true,
        "autoResolveMultipleImports": true,
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        }
      }
    ]
  ]
}

What is your problem? Looks like I have answered for you this question — tmhao2005
@tmhao2005 yes the other issue was solved but now not able to change localIdentName to something else.. like for ex instead of this [path]___[name]__[local]___[hash:base64:5] i need to change it to [name]__[local]___[hash:base64:5] — Sharath
@tmhao2005 basically it should have been like isDev ? localIdentName: "[path]___[name]__[local]___[hash:base64:5]" : [hash:base64:5]" for development and production. But doesn't seem to work as per the above config file... — Sharath

tmhao2005 tmhao2005 · Accepted Answer · 2020-12-27T09:19:23

Sounds like I forgot to tell you babel-plugin-react-css-modules has an option to configure the scoped name too which is called generateScopedName.

As long as you configured this as same as css-loader, it should work then:

.babelrc

[
  "@dr.pogodin/babel-plugin-react-css-modules",
  {
    "generateScopedName": "[name]__[local]___[hash:base64:5]", // switch to whatever you want to
    // ...
  }
]

webpack.config.js:

{
  loader: "css-loader",
  options: {
    modules: {
      // ...
      localIdentName: "[name]__[local]___[hash:base64:5]",
    },
  },
},

NOTE: In case of generating based on env, you should use js babel config file babel.config.js so you can conditionally generate the name via NODE_ENV

Modifying localIdentName in css-loader doesn't work in webpack 5 react 17

1 Answers