react中如何引用less

在React项目中引用Less

安装less和less-loader依赖包，确保项目支持Less预处理：

npm install less less-loader --save-dev

配置Webpack

修改webpack.config.js文件，添加Less处理规则。适用于Create React App等自定义Webpack配置的项目：

{
  test: /\.less$/,
  use: [
    'style-loader',
    'css-loader',
    'less-loader'
  ]
}

使用Create React App的解决方案

通过craco或react-app-rewired覆盖默认配置。以craco为例：

1. 安装依赖：

   npm install @craco/craco craco-less --save-dev

2. 创建craco.config.js：

   
   const CracoLessPlugin = require('craco-less');

module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: {}, javascriptEnabled: true } } } } ] };

### 直接导入Less文件
在React组件中直接引入Less样式文件：
```javascript
import './styles.less';

注意事项

• 使用Create React App官方模板时，需通过eject或第三方工具修改配置
• 确保Node版本兼容less-loader的版本要求
• 全局变量可通过modifyVars配置注入
• 生产环境需测试CSS提取是否正常