css - 在 css-loader 中修改 localIdentName 在 webpack 5 react 17 中不起作用
问题描述
目前我正在使用 webpack 5、react 17 和 @dr.pogodin/babel-plugin-react-css-modules 以及所有其他最新包。
我排除了资产/样式表中的 sass/css 文件,这些文件被视为全局并在className中使用这些类
将不会应用样式将localIdentName更改为其他内容。试过getLocalIdent但没有用。
那么如何更改 localIdentName 呢?
包.json
{
"name": "react-app",
"version": "1.0.0",
"description": "React Template App",
"author": "",
"license": "ISC",
"main": "index.js",
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
"dependencies": {
"date-fns": "^2.16.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@dr.pogodin/babel-plugin-react-css-modules": "^6.0.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^5.0.0-beta.1",
"mini-css-extract-plugin": "^1.3.3",
"node-sass": "^5.0.0",
"postcss": "^8.2.1",
"postcss-scss": "^3.0.4",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.11.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js
常量路径 = 要求(“路径”);
const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isDev = process.env.NODE_ENV === "开发";
控制台.log( Environment: ${isDev ? "development" : "production"}
);
module.exports = {
entry: "./index.js",
mode: isDev ? "development" : "production",
output: {
path: path.join(__dirname, "dist"),
publicPath: "/",
filename: "bundle.js",
},
devServer: {
compress: true,
open: true,
hot: true,
historyApiFallback: true,
quiet: false,
stats: "errors-warnings",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.(css|sass|scss|less)$/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
auto: (resourcePath) =>
resourcePath.indexOf("assets/stylesheets") === -1,
localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
// getLocalIdent: (context, localIdentName, localName, options) => {
// return "whatever_random_class_name";
// },
},
sourceMap: isDev,
},
},
"sass-loader"
],
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html",
favicon: "./public/favicon.ico",
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
})
],
devtool: isDev ? "source-map" : false,
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@dr.pogodin/babel-plugin-react-css-modules",
{
"webpackHotModuleReloading": true,
"autoResolveMultipleImports": true,
"filetypes": {
".scss": {
"syntax": "postcss-scss"
}
}
}
]
]
}
解决方案
听起来我忘了告诉你babel-plugin-react-css-modules
有一个选项来配置范围名称也被称为generateScopedName
.
只要您将其配置为与 相同css-loader
,它就应该可以工作:
.babelrc
[
"@dr.pogodin/babel-plugin-react-css-modules",
{
"generateScopedName": "[name]__[local]___[hash:base64:5]", // switch to whatever you want to
// ...
}
]
webpack.config.js
:
{
loader: "css-loader",
options: {
modules: {
// ...
localIdentName: "[name]__[local]___[hash:base64:5]",
},
},
},
注意:如果基于 env 生成,你应该使用 js babel 配置文件babel.config.js
,这样你可以有条件地通过NODE_ENV
推荐阅读
- angular - 在 Angular 中使用 Observable 从 Express API 获取信息
- android - 任务“:app:mergeDebugResources”执行失败 - AwesomeProject
- javascript - PHP 联系表单正在打开一个新的浏览器选项卡
- angular - Ionic 4 透明透明标头
- django - Elastic Beanstalk - 在每次部署 Django 时运行 npm install 和 webpack
- android - 如何从android studio代码中删除文件
- java - 在没有任何特殊数据结构的情况下计算移动平均线
- nativescript - Android 的 RadListView scrollPosition 属性
- angularjs - 绑定到服务变量的 AngularJS 1.6.9 控制器变量不会改变
- mysql - 数据库日期查询