react v18 less使用（craco）

方案一、弹出配置（不推荐）

• 安装依赖：yarn add less less-loader

• 首先 执行 yarn eject 弹出配置项文件（注意：弹出配置不可逆！）

• 在 config 文件夹中 找到 webpack.config.js，在如图所示位置，加上下面两行代码：

// less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

• 接着在这个文件中搜索 sassRegex，可找到这两块代码，将这两块代码复制，并将其中的 sass 改为 less
  
• 然后重启，即可编写 less

方案二、craco（推荐）

• 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";