css-loader 和 babel-plugin-react-css-modules 之间的不同哈希值

Question

I trying to setup own simple webpack config with css-modules.我尝试使用 css-modules 设置自己的简单 webpack 配置。 And problem is that I getting different hashes by css-loader and babel css modules plugin in css classes names.问题是我通过 css 类名称中的 css-loader 和 babel css 模块插件获得了不同的哈希值。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");


module.exports = {
    context: __dirname,
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "index_bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    "style-loader",
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: {
                                localIdentName: "__[local]___[hash:base64:5]",
                            },
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            plugins: [
                                [
                                    'react-css-modules',
                                    {
                                        generateScopedName: "__[local]___[hash:base64:5]",
                                        autoResolveMultipleImports: true,
                                        webpackHotModuleReloading: false
                                    }
                                ]
                            ]
                        }
                    }
                ]
            },

        ]
    },
    plugins: [
        new webpack.EnvironmentPlugin({ NODE_ENV: 'development', 'BABEL_ENV': 'development' }),
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
    ]
};

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Boilerplate</title>
<script defer="" src="index_bundle.js"></script>
<style>.App_labeltext__1dbpr {
    color: #96db27;
    text-align: center;
}</style></head>

<body>
<div id="root"><div><h1>My React App!</h1><div class="__labeltext___3QMuY">TEXT</div></div></div>


</body></html>

Answer 1

It seems this issue is yet resolved yet which is open here .看来这个问题尚未解决，但已在此处打开。 Basically you can use this forked package @dr.pogodin/babel-plugin-react-css-modules to fix the compatibility with css-loader in case of generating the name.基本上你可以使用这个分叉的 package @dr.pogodin/babel-plugin-react-css-modules来修复与css-loader的兼容性，以防生成名称。

The idea would look like:这个想法看起来像：

{
  plugins: [
    "@dr.pogodin/babel-plugin-react-css-modules", 
    {
      generateScopedName: "__[local]___[hash:base64:5]",
      autoResolveMultipleImports: true,
      webpackHotModuleReloading: false
    },
  ]
}

Or I think you can fix with a way by customizing the function to generate the hash name directly in the plugin which is addressed here或者我认为您可以通过自定义 function 直接在此处解决的插件中生成 hash 名称来修复

css-loader 和 babel-plugin-react-css-modules 之间的不同哈希值

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-05-29 13:43:14

css-loader 和 babel-plugin-react-css-modules 之间的不同哈希值

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-05-29 13:43:14

解决方案1
2 已采纳 2021-05-29 13:43:14