在webpack 5和React 17中，修改css-loader中的localIdentName不起作用。

Question

在webpack 5和React 17中，修改css-loader中的localIdentName不起作用。

cssreactjswebpack

3

目前我正在使用webpack 5，react 17和@dr.pogodin/babel-plugin-react-css-modules以及其他所有最新的软件包。

我正在排除在assets/stylesheets中被视为全局的sass/css文件，并在className中使用这些类。

将localIdentName更改为其他内容不会应用样式。尝试了getLocalIdent，但没有用。

Github存储库链接

那么如何更改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(环境: ${isDev ? "开发" : "生产"});

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

- Sharath

你有什么问题吗？看起来我已经回答了这个问题。 - tmhao2005

@tmhao2005 是的，另一个问题已经解决了，但现在无法将localIdentName更改为其他内容。例如，我需要将其更改为[name]__[local]___[hash:base64:5]，而不是[path]___[name]__[local]___[hash:base64:5]。 - Sharath

@tmhao2005基本上应该像这样：isDev ? localIdentName: "[path]___[name]__[local]___[hash:base64:5]" : [hash:base64:5]"，这适用于开发和生产环境。但是根据上述配置文件似乎无法正常工作... - Sharath

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tmhao2005 · Accepted Answer

听起来我好像忘了告诉你， babel-plugin-react-css-modules 也有一个可以配置局部作用域名称的选项，叫做generateScopedName。

只要你将其配置为与 css-loader 相同，它就应该工作：

.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]",
    },
  },
},

注意：如果基于环境生成，您应该使用 js babel 配置文件 babel.config.js，这样您就可以通过 NODE_ENV 条件地生成名称。