css module设置localIdent,样式失效,hash错误,webpack。getLocalIdent mismatch

今天做使用css modules的React项目的时候发现项目启动后样式错乱&丢失
表现行为是:
审查元素发现样式丢失,搜索相关样式发现,css存在,但是hash不一样。

定位原因是:

  1. 项目使用了babel-plugin-react-css-modules

.babelrc中

{
  "plugins": [
    ["react-css-modules", {
      "option": "value",
      exclude: 'node_modules',
        autoResolveMultipleImports: true,
        filetypes: {
          '.scss': {
            syntax: 'postcss-scss',
            plugins: ['postcss-nested'],
          },
        },
        generateScopedName: XXXXX,
    }]
  ]
}
  1. webpack中使用css-loader:
{
            loader: 'css-loader',
            options: {
              modules: true,
              localIdent: [folder]-[local]__[hash]
            },
          }

重点在于 hash生成的不一样。 所以确保hash一致,问题就 解决了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果使用 `mini-css-extract-plugin` 插件让 webpackCSS 打包到一个单独的 CSS 文件中,而 CSS 文件中的 URL 路径发生了错误,一般有两种情况: 1. CSS 中的相对路径错误:在 CSS 文件中使用的相对路径应该相对于 CSS 文件的位置来解析,而不是相对于 HTML 文件或 JS 文件的位置。如果你使用 `MiniCssExtractPlugin.loader` 作为 CSS loader,那么 CSS 文件会被提取到 `output.path` 目录下的某个位置,而不是和 JS 文件同级的位置。因此,你需要在配置中指定 `publicPath` 参数来指定 CSS 文件在服务器上的 URL 路径。例如: ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { // ... output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/", }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: "css/[name].css", }), ], }; ``` 上面的配置中,我们将 CSS 文件提取到 `dist/css` 目录下,并指定了 `publicPath` 参数为 `/`,表示所有静态资源都在根目录下。这样,在 CSS 文件中使用相对路径时,就会相对于 `dist/css` 目录来解析。 2. 图片等资源文件路径错误:如果 CSS 中包含了图片等资源文件,那么这些文件的路径也需要正确解析。一般来说,可以使用 `file-loader` 或 `url-loader` 来处理这些文件,并在 CSS 中使用相对路径来引用它们。例如: ```css /* style.css */ body { background-image: url(../images/bg.jpg); } ``` ```js // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: "url-loader", options: { limit: 8192, name: "images/[name].[hash:8].[ext]", }, }, ], }, ], }, }; ``` 上面的配置中,`url-loader` 会将小于 8KB 的图片文件转换为 base64 编码的 Data URL,而大于 8KB 的文件会被转换为单独的文件,并存放到 `dist/images` 目录下。在 CSS 文件中使用相对路径 `../images/bg.jpg` 就可以正确引用这个图片文件了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值