当前位置: 首页 > 知识库问答 >
问题:

在css加载器中修改localIdentName在webpack 5.17中不起作用

酆俊远
2023-03-14

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

我排除了资产/样式表中的sass/css文件,这些文件被视为全局文件,并在className中使用这些类

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

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 HtmlWebpackPlugin=require(“html网页包插件”);const MiniCssExtractPlugin=require(“迷你css提取插件”);

const isDev=process.env.NODE_env==“开发”;

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,
};

B.法律改革委员会

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

共有1个答案

东郭子默
2023-03-14

听起来好像我忘了告诉你Babel-plugin-react-css-模块也有一个配置作用域名称的选项,称为GenerateScopedName

只要您将其配置为与css加载程序相同,它就应该可以工作:

  • .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 config filebabel.config.js,这样您就可以通过NODE_env

 类似资料:
  • 问题内容: 在IE10中,此代码无法正常工作: 应该发生的是,该宽度应为31px,并占用内的其余可用空间。由于某种原因,发生的事情只是默认为263px。 在Chrome和Firefox中可以正常运行。 问题答案: IE尚不完全支持Flex布局模式。IE10实现了规范的“补间”版本,该版本不是完全最新的,但仍然可以使用。

  • 问题内容: 我尝试阅读有关如何处理IE中自定义字体的多篇文章,但是它们似乎对我没有用。我尝试将字体转换为,但这似乎也不起作用。我不确定自己在做什么错,所以我将发布我的代码 问题答案: 这在ie8 / 9中有效

  • 问题内容: 我将datepicker附加到全局脚本文件中的输入中,如下所示: 在特定页面上,模态对话框(还有jquery ui)中有输入(将与datepicker一起使用),我通过$ .load()调用该页面并注入其他页面的div中。 上面的代码对于其他页面中的静态输入非常有效,但对于上面的scenerio,它显示的是datepicker对话框很好,但是当我单击一个日期时,它会抛出错误(f未定义)

  • 我谷歌了很多,这是真的奇怪的Spring Boot(最新版本)可能没有懒惰加载是不工作的。以下是我的代码片段: 我的资源: 我的服务: 编辑2: 对于规范构建,我有:

  • 问题内容: 我动态加载CSS样式表(在jQuery的帮助下),如下所示: 这在Firefox和Google Chrome浏览器中工作正常,但在IE中则 不能 。 有什么帮助吗?谢谢 问题答案: IE处理完页面加载的所有样式后,添加另一种样式表的唯一可靠方法是 有关更多详细信息。

  • HTML格式 我没有这个的id或名称。因此我写 但click()没有发生。 已尝试driver . find element(by . CSS selector("。按钮[值=搜索]”)。单击(); 尝试值='Search '(单引号)。 这些选择器正在