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

问题描述

我尝试使用 css-modules 设置自己的简单 webpack 配置。问题是我在 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>

解决方法

这个问题似乎还没有解决，here 是开放的。基本上你可以使用这个分叉包 css-loader 来修复与 { plugins: [ "@dr.pogodin/babel-plugin-react-css-modules",{ generateScopedName: "__[local]___[hash:base64:5]",autoResolveMultipleImports: true,webpackHotModuleReloading: false },] } 的兼容性，以防生成名称。

这个想法看起来像：

{{1}}

或者我认为您可以通过自定义函数来直接在插件中生成哈希名称来解决此问题，该插件地址为 here

babel-plugin-react-css-modules css-modules javascript webpack webpack webpack