react less如何配置
配置 React 项目使用 Less
安装必要的依赖包。在项目根目录下运行以下命令安装 less 和 less-loader：
npm install less less-loader --save-dev修改 webpack 配置。如果项目使用 create-react-app 创建，需要先暴露 webpack 配置文件：
npm run eject在暴露出的 webpack.config.js 文件中，找到 module.rules 部分，添加 Less 文件处理规则：
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}使用 CSS Modules 支持
如果需要使用 CSS Modules，修改 webpack 配置中的 css-loader 选项：
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
},
'less-loader'
]
}创建全局样式变量
创建 variables.less 文件定义全局变量：
@primary-color: #1890ff;
@font-size-base: 14px;在组件中引入并使用这些变量：
@import '~styles/variables.less';
.container {
color: @primary-color;
font-size: @font-size-base;
}配置路径别名
在 webpack 配置中添加路径别名，方便引用样式文件：
resolve: {
alias: {
'@styles': path.resolve(__dirname, '../src/styles')
}
}在组件中可以使用别名引入样式：
@import '@styles/variables.less';处理生产环境优化
在生产环境配置中，添加 CSS 提取插件：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 替换 style-loader 为 MiniCssExtractPlugin.loader
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}解决常见问题
遇到样式不生效时，检查 webpack 配置是否正确，确保 loader 顺序为 style-loader/MiniCssExtractPlugin.loader -> css-loader -> less-loader。
对于 TypeScript 项目，需要添加 less 模块声明。创建 declarations.d.ts 文件：
declare module '*.less' {
const classes: { [key: string]: string };
export default classes;
}
