craco-less使用问题
# 问题背景
前端是用React
搭建,使用craco
配置,相关库或插件版本如下
"@craco/craco": "^7.1.0",
"react-scripts": "^5.0.1",
"craco-less": "^3.0.1"
1
2
3
2
3
在生产环境,Node.js
构建时,报错如下
Error: Found an unhandled loader in the developement webpack config: node_modules/style-loader/index.js
This error probably occurred because you updated react-scripts or craco. Please try updating craco-less to the latest version:
$ yarn upgrade craco-less
Or:
$ npm update craco-less
If that doesn't work, craco-less needs to be fixed to support the latest version.
Please check to see if there's already an issue in the FormAPI/craco-less repo:
* https://github.com/FormAPI/craco-less/issues?q=is%3Aissue+webpack+unknown+rule
If not, please open an issue and we'll take a look. (Or you can send a PR!)
You might also want to look for related issues in the craco and create-react-app repos:
* https://github.com/sharegate/craco/issues?q=is%3Aissue+webpack+unknown+rule
* https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack+unknown+rule
at throwUnexpectedConfigError (.../node_modules/@craco/craco/lib/plugin-utils.js:29:11)
at throwError (.../node_modules/craco-less/lib/craco-less.js:14:5)
at .../node_modules/craco-less/lib/craco-less.js:119:7
at Array.forEach (<anonymous>)
at Object.overrideWebpackConfig (.../node_modules/craco-less/lib/craco-less.js:51:11)
at overrideWebpack (.../node_modules/@craco/craco/lib/features/plugins.js:42:40)
at .../node_modules/@craco/craco/lib/features/plugins.js:64:29
at Array.forEach (<anonymous>)
at applyWebpackConfigPlugins (.../node_modules/@craco/craco/lib/features/plugins.js:63:29)
at mergeWebpackConfig (.../node_modules/@craco/craco/lib/features/webpack/merge-webpack-config.js:67:30)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 解决方案
尝试在craco-less
的 github 和网上寻找方法,设置NODE_NODE_ENV
依旧无效,项目中用到less
无非是想使用CSS Module
,实现 CSS 的局部使用。craco-less
最近的一次更新还是 8 个月之前,且最新版本上仍然有很多 issues 未被解决,因此放弃craco-less
,改用craco-css-modules
craco-css-modules
的参考地址:https://github.com/crazyurus/craco-css-modules (opens new window)
# craco.config.js
配置如下
const CracoCSSModules = require("craco-css-modules");
module.exports = {
plugins: [
{
plugin: CracoCSSModules,
},
],
devServer: {
port: 8081,
},
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 使用
实现CSS Module
前后区别:
.bgImg {
width: 100%;
height: 100%;
object-fit: cover;
}
1
2
3
4
5
2
3
4
5
// Before
import styles from "./index.module.less";
// After
import styles from "./index.css";
1
2
3
4
5
2
3
4
5
# 结果
本地运行和生产环境的流水线都没有问题
效果如下:
编辑 (opens new window)
上次更新: 2024/09/18, 09:16:13