什么是craco

在Creact-react-app中我们想要修改默认的webpack配置，我们可以通过eject导出配置文件进行修改，但是这样的操作是不可逆的。所以我们更推荐使用craco或react-app-rewired这样的工具来达到不eject而修改webpack的目的。

安装craco

在工程中引入craco和craco-less npm i craco npm i craco-less

修改package.json

打开 package.json文件，找到scripts字段，并修改替换成以下代码

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

然后在工程根目录下，新增craco.config.js文件， 键入以下代码

const CracoLessPlugin = require("craco-less");
const { loaderByName } = require("@craco/craco");
 
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessModuleRule(lessModuleRule, context) {
          // Configure the file suffix
          lessModuleRule.test = /.module.less$/;
 
          // Configure the generated local ident name.
          console.log(lessModuleRule)
          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
          cssLoader.options.modules = {
            localIdentName: "[local]_[hash:base64:5]",
          };
 
          return lessModuleRule;
        },
      },
    },
  ],
};

如果使用的是TypeScript编程，则在react-app-env.d.ts.文件中添加以下内容，解决模块问题

declare module '*.module.less' {
  const classes: {
    readonly [key: string]: string
  }
  export default classes
  declare module '*.less'
}

craco-less原文文档