css-loader和babel-plugin-react-css-modules之间的散列不同
css-loader和babel-plugin-react-css-modules之间的散列不同
提问于 2021-05-29 07:17:26
我试着用css-modules设置自己的简单的webpack配置。问题是，我得到了不同的css-loader和babel css模块插件的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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-29 21:43:15
这个问题似乎还没有解决，这就是开放的here。基本上，在生成名称的情况下，您可以使用这个派生包@dr.pogodin/babel-plugin-react-css-modules来修复与css-loader的兼容性。
这个想法看起来是这样的：
{
plugins: [
"@dr.pogodin/babel-plugin-react-css-modules",
{
generateScopedName: "__[local]___[hash:base64:5]",
autoResolveMultipleImports: true,
webpackHotModuleReloading: false
},
]
}或者，我认为您可以通过定制函数直接在名为here的插件中生成散列名称来修复此问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67746387
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号