如何使用 React 设置 babel-plugin-react-css-modules?
How to set up babel-plugin-react-css-modules with React?
我现在正在学习 React,我遇到了“React CSS Modules". I like the idea of CSS scoping and I want to use it in my code. I found babel-plugin-react-css-modules 这个插件让代码看起来更干净的概念。但是,我在我的代码中设置它时遇到了一些问题。
这是我的 .babelrc
文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"babel-plugin-react-css-modules",
{
"webpackHotModuleReloading": true,
"autoResolveMultipleImports": true
}
]
]
}
我的webpack.config.js
:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js",
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
cacheDirectory: true,
},
},
},
{
test: /\.css$/i,
use: [
"style-loader",
{
loader: "css-loader", //generating unique classname
options: {
importLoaders: 1, // if specifying more loaders
modules: true,
sourceMap: false,
localIdentName:
"[path]___[name]__[local]___[hash:base64:5]", //babel-plugin-css-module format
//localIdentName: "[path][name]__[local]" //recommended settings by cssloader#local-scope , this option generate unique classname for compiled css
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
};
还有我的package.json
:
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "npx webpack server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-plugin-react-css-modules": "^5.2.6",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.14.0",
"@babel/preset-env": "^7.14.1",
"@babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.4",
"html-webpack-plugin": "^5.3.1",
"postcss-scss": "^3.0.5",
"style-loader": "^2.0.0",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
}
}
如果我这样做 npm start
,我得到错误:
modules by path ./src/css/*.css 1.42 KiB
./src/css/styles.css 1.38 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/styles.css 39 bytes [built] [code generated] [1 error]
./src/index.js 194 bytes [built] [code generated]
./src/components/App.js 388 bytes [built] [code generated]
ERROR in ./src/css/styles.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/styles.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'localIdentName'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
更多详情,我有我的代码here。感谢您的帮助!
BTY,我阅读了可能的解决方案 ,但没有成功。
babel-plugin-react-css-modules 严重过时且无人维护;
然而,它的最新分支 @dr.pogodin/babel-plugin-react-css-modules 由我维护 :)
我现在正在学习 React,我遇到了“React CSS Modules". I like the idea of CSS scoping and I want to use it in my code. I found babel-plugin-react-css-modules 这个插件让代码看起来更干净的概念。但是,我在我的代码中设置它时遇到了一些问题。
这是我的 .babelrc
文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"babel-plugin-react-css-modules",
{
"webpackHotModuleReloading": true,
"autoResolveMultipleImports": true
}
]
]
}
我的webpack.config.js
:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js",
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
cacheDirectory: true,
},
},
},
{
test: /\.css$/i,
use: [
"style-loader",
{
loader: "css-loader", //generating unique classname
options: {
importLoaders: 1, // if specifying more loaders
modules: true,
sourceMap: false,
localIdentName:
"[path]___[name]__[local]___[hash:base64:5]", //babel-plugin-css-module format
//localIdentName: "[path][name]__[local]" //recommended settings by cssloader#local-scope , this option generate unique classname for compiled css
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
};
还有我的package.json
:
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "npx webpack server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-plugin-react-css-modules": "^5.2.6",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.14.0",
"@babel/preset-env": "^7.14.1",
"@babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.4",
"html-webpack-plugin": "^5.3.1",
"postcss-scss": "^3.0.5",
"style-loader": "^2.0.0",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
}
}
如果我这样做 npm start
,我得到错误:
modules by path ./src/css/*.css 1.42 KiB
./src/css/styles.css 1.38 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/styles.css 39 bytes [built] [code generated] [1 error]
./src/index.js 194 bytes [built] [code generated]
./src/components/App.js 388 bytes [built] [code generated]
ERROR in ./src/css/styles.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/css/styles.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'localIdentName'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
更多详情,我有我的代码here。感谢您的帮助!
BTY,我阅读了可能的解决方案
babel-plugin-react-css-modules 严重过时且无人维护; 然而,它的最新分支 @dr.pogodin/babel-plugin-react-css-modules 由我维护 :)