react如何引入less

在React项目中引入Less

确保项目已安装less和less-loader依赖。可以通过以下命令安装：

npm install less less-loader --save-dev

配置Webpack

修改Webpack配置以支持Less文件解析。在webpack.config.js中找到module.rules部分，添加以下规则：

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

创建Less文件

在项目中创建.less文件，例如styles.less。编写Less样式：

@primary-color: #1890ff;
.container {
  background: @primary-color;
}

在组件中引入Less

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

import './styles.less';

使用CSS Modules（可选）

如果需要模块化样式，修改Webpack配置：

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

组件中引入时通过变量名引用：

import styles from './styles.less';
function Component() {
  return <div className={styles.container} />;
}

Create React App项目配置

如果使用Create React App，需通过react-app-rewired覆盖配置：

1. 安装依赖：

   npm install react-app-rewired customize-cra --save-dev

2. 创建config-overrides.js并添加：

   const { override, addLessLoader } = require('customize-cra');
   module.exports = override(
   addLessLoader()
   );

3. 修改package.json中的脚本命令：

   "scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build"
   }