![](/img/trans.png)
[英]Integrate React 17 with webpack 5 and babel-plugin-react-css-modules (css modules with stylename)
[英]Different hashes between css-loader and 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>
看來這個問題尚未解決,但已在此處打開。 基本上你可以使用這個分叉的 package @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
},
]
}
或者我認為您可以通過自定義 function 直接在此處解決的插件中生成 hash 名稱來修復
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.