craco-less使用问题

craco-less使用问题

问题背景

前端是用React搭建，使用craco配置，相关库或插件版本如下

 "@craco/craco": "^7.1.0","react-scripts": "^5.0.1","craco-less": "^3.0.1"

在生产环境，Node.js构建时，报错如下

Error: Found an unhandled loader in the developement webpack config: node_modules/style-loader/index.jsThis error probably occurred because you updated react-scripts or craco. Please try updating craco-less to the latest version:$ yarn upgrade craco-lessOr:$ npm update craco-lessIf 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+ruleIf 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+ruleat 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:7at 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:29at 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)

解决方案

尝试在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

craco.config.js配置如下

const CracoCSSModules = require("craco-css-modules");module.exports = {plugins: [{plugin: CracoCSSModules,},],devServer: {port: 8081,},
};

使用

实现CSS Module前后区别：

.bgImg {width: 100%;height: 100%;object-fit: cover;
}

// Before
import styles from "./index.module.less";// After
import styles from "./index.css";

结果

本地运行和生产环境的流水线都没有问题

效果如下：