react如何使用less

使用 Less 在 React 项目中

在 React 项目中使用 Less 需要配置构建工具（如 webpack）以支持 Less 文件的编译。以下是具体方法：

安装依赖

确保项目已安装 less 和 less-loader。通过 npm 或 yarn 安装：

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

配置 webpack

修改 webpack.config.js（通常位于项目根目录或 config 目录），添加 Less 支持：

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

创建 Less 文件

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

@primary-color: #1890ff;

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

引入 Less 文件

在 React 组件中直接导入 Less 文件：

import './styles.less';

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

使用 Create React App 的项目配置

如果项目基于 create-react-app（CRA），需通过 craco 或 eject 自定义配置：

方法 1：使用 CRACO

1. 安装 craco-less：

   

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

2. 创建 craco.config.js：

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

module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };

3. 修改 `package.json` 的脚本：
```json
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

方法 2：Eject 后配置

运行 npm run eject 暴露 webpack 配置，手动添加 Less 规则（参考前述 webpack 配置）。

注意事项

• 确保 css-loader 和 style-loader 已安装。
• 若需修改 Less 变量（如 Ant Design 主题），通过 modifyVars 配置。
• 对于 TypeScript 项目，需在 global.d.ts 中添加 Less 文件类型声明：

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