当前位置：首页 > React

react如何使用less

2026-02-12 06:06:59React

安装 less 和 less-loader

在 React 项目中安装 less 和 less-loader 作为开发依赖。可以通过 npm 或 yarn 进行安装：

npm install less less-loader --save-dev
# 或
yarn add less less-loader --dev

配置 webpack

修改 webpack.config.js 文件以支持 less 文件的解析。确保配置中包含 less-loader，并将其添加到 module.rules 中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

如果使用 create-react-app 创建的项目，需要先执行 npm run eject 或使用 craco 或 react-app-rewired 覆盖配置。

创建 less 文件

在项目中创建 .less 文件，例如 styles.less，并编写 less 代码：

@primary-color: #1890ff;

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

在组件中引入 less 文件

在 React 组件中直接引入 less 文件：

import React from 'react';
import './styles.less';

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

export default App;

使用 CSS Modules（可选）

如果需要使用 CSS Modules，可以修改 webpack 配置：

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

在组件中引入时使用模块化类名：

import styles from './styles.less';

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

使用变量和混合

Less 支持变量和混合功能，可以在项目中充分利用：

@border-radius: 4px;

.button {
  border-radius: @border-radius;
  padding: 8px 16px;
}

.primary-button {
  .button();
  background-color: #1890ff;
  color: white;
}