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.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)

解决方案

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

结果

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

效果如下：