当前位置：首页 > React

react less如何配置

2026-02-11 19:04:17React

配置 React 项目使用 Less

安装必要的依赖包。需要同时安装 less 和 less-loader，用于在 Webpack 中处理 Less 文件。运行以下命令：

npm install less less-loader --save-dev

修改 Webpack 配置。如果项目使用 create-react-app 创建，需要先执行 npm run eject 暴露配置。找到 webpack.config.js 文件，在 module.rules 部分添加 Less 规则：

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

创建或修改 react-app-env.d.ts 文件（TypeScript 项目需要）。在项目根目录下的 src 文件夹中添加声明文件，内容如下：

declare module '*.less' {
  const classes: { [key: string]: string };
  export default classes;
}

在组件中引入 Less 文件。创建 .less 文件后，可以在 React 组件中通过 import 引入：

import styles from './styles.less';

function Component() {
  return <div className={styles.container}>Content</div>;
}

解决常见问题

样式不生效时检查 Webpack 配置顺序。确保 less-loader 在 css-loader 之后，style-loader 在最前面。

全局变量和混入可以通过修改 Less 加载器配置实现。在 Webpack 配置中添加：

{
  loader: 'less-loader',
  options: {
    lessOptions: {
      modifyVars: {
        'primary-color': '#1DA57A'
      },
      javascriptEnabled: true
    }
  }
}

对于未弹出配置的 create-react-app 项目，可以使用 craco 或 react-app-rewired 覆盖配置。安装 craco-less 后，在 craco.config.js 中配置：

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

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

react less如何配置