react如何引入less

在React项目中引入Less

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

npm install less less-loader --save-dev

配置Webpack

修改webpack.config.js，添加Less支持。找到module.rules数组，新增以下规则：

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

创建Less文件

在项目目录中新建.less文件，例如styles.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}></div>;
}

Create React App项目配置

若使用create-react-app，需通过react-app-rewired覆盖配置。安装依赖：

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

修改config-overrides.js：

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

更新package.json的脚本部分：

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