react 如何引入less

在React项目中引入Less样式预处理

安装less和less-loader依赖包：

npm install less less-loader --save-dev

配置Webpack（以create-react-app为例）

弹出Webpack配置（如使用create-react-app）：

npm run eject

修改config/webpack.config.js文件，在module.rules中添加Less规则：

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

创建并使用Less文件

新建.less文件（如styles.less）：

@primary-color: #1890ff;

.container {
  background: @primary-color;
}

在React组件中引入Less文件：

import './styles.less';

自定义配置选项（可选）

如需自定义Less选项，可修改less-loader配置：

{
  loader: 'less-loader',
  options: {
    lessOptions: {
      modifyVars: {
        'primary-color': '#1DA57A'
      },
      javascriptEnabled: true
    }
  }
}

TypeScript项目补充配置

在src/react-app-env.d.ts中添加类型声明：

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

注意事项

• 确保项目使用的Webpack版本兼容less-loader
• 如未使用create-react-app，直接修改项目已有的Webpack配置即可
• 生产环境构建时建议启用CSS压缩插件