当前位置：首页 > React

react中less如何生效

2026-03-10 19:55:38React

安装 less 和 less-loader

在 React 项目中，使用 less 需要安装 less 和 less-loader 两个依赖。通过 npm 或 yarn 安装：

npm install less less-loader --save-dev

或

yarn add less less-loader --dev

配置 webpack

如果是通过 create-react-app 创建的项目，需要先暴露 webpack 配置：

npm run eject

然后在 webpack.config.js 中修改配置，添加 less 支持。找到 module.rules 部分，添加以下规则：

react中less如何生效

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

创建并使用 less 文件

在项目中创建 .less 文件，例如 styles.less：

@primary-color: #1890ff;

.container {
  background-color: @primary-color;
  color: white;
}

在 React 组件中引入 less 文件：

react中less如何生效

import './styles.less';

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

使用 CSS Modules（可选）

如果需要支持 CSS Modules，修改 webpack 配置：

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

在组件中使用时，引入的类名会是一个对象：

import styles from './styles.less';

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

解决常见问题

如果遇到 Inline JavaScript is not enabled 错误，在 webpack 配置中启用 JavaScript：

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