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为独立文件。
