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, Dec 27 '20 at 07:42
@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, Dec 27 '20 at 08:21
@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, Dec 27 '20 at 08:36

score 3 · Accepted Answer · answered Dec 27 '20 at 09:19

3

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

answered Dec 27 '20 at 09:19

tmhao2005

14,776
2
37
44

thanks it wokred and depending upon env i was able to make it dynamic. – Sharath Dec 27 '20 at 09:42
is it possible to check this issue having similar kind of issue related to loaders in storybook https://stackoverflow.com/questions/65464491/module-parse-failed-unexpected-character-10-with-storybook-6-1-11-webpa – Sharath Dec 27 '20 at 09:43
No problem. I’m checking as I’m free then :) – tmhao2005 Dec 27 '20 at 09:48

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

1 Answers1