• yarn add @craco/craco
• yarn add less craco-less
• 修改 package.json 文件

修改前：

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

修改后：

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

• 根目录新建 craco.config.js

const CracoLessPlugin = require("craco-less");
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { "@primary-color": "#1DA57A" }, //主题颜色
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

• 完成以上步骤，即可开始编写 less
• 比如 新建 common.less文件，在index.js中引入

import "./style/common.less";