在 css-loader 中修改 localIdentName 在 webpack 5 react 17 中不起作用

Posted 2023-03-07

【中文标题】在 css-loader 中修改 localIdentName 在 webpack 5 react 17 中不起作用

【英文标题】：Modifying localIdentName in css-loader doesn't work in webpack 5 react 17

【发布时间】：2021-04-04 07:58:27

【问题描述】：

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

我排除了 assets/stylesheets 中的 sass/css 文件，这些文件被视为全局并在 className

中使用这些类

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

Github Repo Link

那么如何更改 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 === "开发";

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

【问题讨论】：

你的问题是什么？看来我已经为你回答了这个问题

@tmhao2005 是的，其他问题已解决，但现在无法将 localIdentName 更改为其他内容.. 就像 ex 而不是这个 [path]___[name]__[local]___[hash:base64:5] 我需要将其更改为 [name]__[local]___[hash:base64:5]

@tmhao2005 基本上它应该像isDev ? localIdentName: "[path]___[name]__[local]___[hash:base64:5]" : [hash:base64:5]" 用于开发和生产。但似乎没有按照上面的配置文件工作......

【参考方案1】：

听起来我忘了告诉你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]",
    ,
  ,
,

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

【讨论】：

感谢它的工作，并且根据环境，我能够使其动态化。

是否可以在故​​事书中检查此问题与加载器相关的类似问题***.com/questions/65464491/…

没问题。我正在检查，因为我有空:)