目前我正在使用webpack 5,react 17和@dr.pogodin/babel-plugin-react-css-modules以及其他所有最新的软件包。
我正在排除在assets/stylesheets中被视为全局的sass/css文件,并在className中使用这些类。
将localIdentName更改为其他内容不会应用样式。尝试了getLocalIdent,但没有用。
那么如何更改localIdentName?
package.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 path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isDev = process.env.NODE_ENV === "development";
console.log(环境: ${isDev ? "开发" : "生产"}
);
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"
}
}
}
]
]
}
[name]__[local]___[hash:base64:5]
,而不是[path]___[name]__[local]___[hash:base64:5]
。 - SharathisDev ? localIdentName: "[path]___[name]__[local]___[hash:base64:5]" : [hash:base64:5]"
,这适用于开发和生产环境。但是根据上述配置文件似乎无法正常工作... - Sharath