当前位置：首页 > React

react如何加入less

2026-02-12 01:46:08React

在React项目中集成Less

安装less和less-loader依赖包：

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

配置Webpack

修改webpack.config.js文件，添加Less支持：

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

创建React组件并使用Less

创建一个带有Less样式的组件文件：

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

const MyComponent = () => (
  <div className="my-component">
    <h1>Styled with Less</h1>
  </div>
);

export default MyComponent;

对应的Less文件MyComponent.less：

react如何加入less

.my-component {
  h1 {
    color: #1890ff;
    font-size: 24px;
  }
}

使用Create React App的解决方案

对于使用Create React App创建的项目，需要先执行：

npm run eject

然后按照上述Webpack配置方法进行修改。或者使用craco工具避免eject：

安装craco和craco-less：

react如何加入less

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

创建craco.config.js：

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

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

修改package.json中的scripts：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

变量和混入的使用

Less支持变量和混入等高级特性：

@primary-color: #1890ff;

.my-component {
  .heading-style() {
    font-weight: bold;
    text-transform: uppercase;
  }

  h1 {
    color: @primary-color;
    .heading-style();
  }
}