react如何加入less

在React项目中集成Less

安装less和less-loader依赖包：

npm install less less-loader --save-dev

配置Webpack

修改webpack.config.js文件，确保配置中包含Less支持。若使用Create React App，需通过react-app-rewired覆盖配置：

module.exports = function override(config) {
  config.module.rules.push({
    test: /\.less$/,
    use: [
      'style-loader',
      'css-loader',
      'less-loader'
    ]
  });
  return config;
};

创建Less文件

新建一个.less文件（如styles.less）并编写样式：

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

在组件中引入Less

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

import './styles.less';
function App() {
  return <div className="container">Content</div>;
}

使用CSS Modules（可选）

如需模块化，修改Webpack配置：

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

文件命名改为styles.module.less，引入方式调整为：

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

注意事项

• 若项目基于Create React App，需先安装react-app-rewired并修改package.json的scripts。
• 确保Node.js版本兼容less-loader的依赖要求。
• 生产环境构建时，建议使用MiniCssExtractPlugin提取CSS为独立文件。