react项目如何导入less?

常规的方法是下载完 less-loader less , 然后运行 npm run eject 来暴露 webpack 的配置文件.但是,Create React App 创建的 react 项目默认并不暴露 Webpack 的配置文件 , eject 是一个不可逆的操作，它会将 Create React App 的内部配置复制到您的项目中，这意味着你将失去 Create React App 提供的所有未来更新和自动化功能, 所以这种方法并不是很推荐

接下来我将介绍一个推荐的方法:

1. 运行 yarn add @craco/craco less less-loader --dev
2. 修改 package.json:
   将 react-scripts 相关的脚本替换为 craco。修改 package.json 文件中的 scripts 部分，如下所示：

   "scripts": {  
  "start": "craco start",  
  "build": "craco build",  
  "test": "craco test",  
  "eject": "react-scripts eject" // 可以保留这个，但通常不建议使用eject  
}

3. 创建 craco 配置文件
   在根目录下创建一个名为 craco.config.js 的文件, 然后添加如下代码:

const CracoLessPlugin = require('craco-less');  
  
module.exports = {  
  plugins: [  
    {  
      plugin: CracoLessPlugin,  
      options: {  
        lessLoaderOptions: {  
          lessOptions: {  
            // 在这里添加您的Less选项，如果需要的话  
            modifyVars: { '@primary-color': '#1DA57A' }, // 例如，覆盖antd的默认主题色  
            javascriptEnabled: true,  
          },  
        },  
      },  
    },  
  ],  
};

4. 接着, 就可以愉快的使用 less, 比如:

import React from 'react';  
import './MyComponent.less'; // 直接导入Less样式文件,十分畅快
  
function MyComponent() {  
  return <div className="my-class">Hello, Less!</div>;  
}  
  
export default MyComponent;

看到这里,点个赞呗 !!!