react如何引入less文件

安装必要依赖

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

npm install less less-loader --save-dev

配置 webpack

在 React 项目中，通常通过 react-scripts 管理 webpack 配置。若需自定义配置，需通过 craco 或 eject 修改。

使用 craco 的示例配置（craco.config.js）：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      });
      return webpackConfig;
    }
  }
};

创建或修改 React 组件

在组件中直接引入 .less 文件：

import './styles.less';

示例 less 文件内容

创建 styles.less 文件并编写样式：

@primary-color: #1890ff;

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

注意事项

• 若使用 Create React App (CRA) 且未 eject，需通过 react-app-rewired 和 customize-cra 覆盖配置。
• 确保 less-loader 版本与 webpack 版本兼容，避免构建错误。
• 对于 CSS Modules，需在 less-loader 配置中启用 modules: true。