当前位置：首页 > React

如何在react中使用less

2026-01-25 08:37:09React

在React项目中使用Less

要在React项目中使用Less预处理器，需要安装相关依赖并配置Webpack。以下是具体步骤：

安装Less和Less-loader

确保项目已初始化后，安装less和less-loader：

npm install less less-loader --save-dev

或使用Yarn：

yarn add less less-loader --dev

配置Webpack

对于使用create-react-app创建的项目，需通过react-app-rewired或eject修改Webpack配置。

方法1：使用react-app-rewired（推荐）

安装react-app-rewired和customize-cra：

npm install react-app-rewired customize-cra --save-dev

在项目根目录创建config-overrides.js，添加以下内容：

const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' }, // 可选：覆盖Less变量
    },
  })
);

修改package.json中的脚本命令：

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

方法2：Eject项目

运行npm run eject暴露Webpack配置后，修改webpack.config.js：

找到module.rules中的CSS配置部分。

添加Less规则：

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

创建并使用Less文件

创建.less文件（如styles.less）：

@primary-color: #1890ff;

.container {
  background-color: @primary-color;
  padding: 20px;
}

在React组件中引入：

import './styles.less';

function App() {
  return <div className="container">Hello Less!</div>;
}

注意事项

变量覆盖：通过modifyVars可以动态修改Less变量，适合主题定制。
模块化：若需CSS模块化，将css-loader的modules选项设为true：
```
{
  loader: 'css-loader',
  options: {
    modules: true,
  },
}
```
版本兼容：确保less-loader与Webpack版本兼容。最新版React通常需less-loader@^10.x。