react如何引入less

在React项目中引入Less的步骤

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

npm install less less-loader --save-dev
# 或
yarn add less less-loader --dev

修改Webpack配置以支持Less文件解析。对于Create React App (CRA)项目，需先执行npm run eject暴露配置，然后在webpack.config.js中找到module.rules数组，添加以下规则：

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

配置TypeScript支持（可选）

若项目使用TypeScript，需在src/react-app-env.d.ts中添加类型声明：

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

创建并使用Less文件

新建.less文件（如styles.less），编写样式：

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

在React组件中引入：

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

注意事项

• CRA项目需通过npm run eject后才能修改Webpack配置，否则需使用craco或react-app-rewired覆盖配置。
• 确保css-loader和style-loader已安装，它们是处理样式依赖链的必要组件。
• 若遇到版本兼容问题，可尝试指定less-loader版本，如yarn add less-loader@7.3.0。