react如何引入less
在React项目中引入Less
确保项目已安装less和less-loader依赖。若未安装，通过以下命令安装：
npm install less less-loader --save-dev配置Webpack
修改webpack.config.js，添加Less支持。找到module.rules数组，新增以下规则：
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}创建Less文件
在项目目录中新建.less文件，例如styles.less：
@primary-color: #1890ff;
.container {
background: @primary-color;
}在组件中引入Less
在React组件中直接导入Less文件：
import './styles.less';使用CSS Modules（可选）
若需模块化样式，修改Webpack配置：
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
},
'less-loader'
]
}组件中引入时需指定类名：
import styles from './styles.less';
function Component() {
return <div className={styles.container}></div>;
}Create React App项目配置
若使用create-react-app，需通过react-app-rewired覆盖配置。安装依赖：
npm install react-app-rewired customize-cra --save-dev修改config-overrides.js：
const { override, addLessLoader } = require('customize-cra');
module.exports = override(
addLessLoader({
lessOptions: {
javascriptEnabled: true
}
})
);更新package.json的脚本部分：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build"
}
