在react配置使用less的完美方案

npm install less less-loader --save-dev
//
yarn add less less-loader --dev

npm install npm install react-app-rewired customize-cra babel-plugin-import --save-dev
//
yarn add npm install react-app-rewired customize-cra babel-plugin-import

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

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd', // 如果你的项目中使用了 antd 或其他库需要按需加载样式，请相应地修改这里。
    libraryDirectory: 'es', // 默认值是 'lib'，如果你使用的是 antd 的 es 模块版本，请修改这里。
  }),
  addLessLoader({ lessOptions: { javascriptEnabled: true } }) // 启用 JavaScript 在 Less 中的支持（如果需要的话）。
);

import './MyComponent.less'; // 使用相对路径导入你的 .less 文件。

yarn remove less-loader
yarn add less-loader@5.0.0

customize-cra-less-loader

const { override } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");
module.exports = override(
  addLessLoader({
    lessLoaderOptions: {
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#038fde',
        }
      }
    }
  })
);