react less如何配置
在 React 项目中配置 Less
安装必要的依赖包，确保项目支持 Less 预处理样式。使用以下命令安装 less 和 less-loader：
npm install less less-loader --save-dev配置 Webpack
修改 Webpack 配置文件（通常为 webpack.config.js 或 react-scripts 的覆盖配置），添加 Less 支持。对于 Create React App 项目，可以通过 craco 或 eject 自定义配置：
// craco.config.js (使用 craco)
module.exports = {
webpack: {
configure: (webpackConfig) => {
webpackConfig.module.rules.push({
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
});
return webpackConfig;
},
},
};创建 Less 文件并引入
在项目中创建 .less 文件（例如 styles.less），并通过 import 引入到组件中：
// styles.less
@primary-color: #1890ff;
.container {
background-color: @primary-color;
}// App.js
import './styles.less';
function App() {
return <div className="container">Hello Less</div>;
}处理 CSS Modules
如果需要使用 CSS Modules，修改 Webpack 配置中的 css-loader 选项：
// craco.config.js 部分配置
{
loader: 'css-loader',
options: {
modules: {
auto: true, // 匹配 .module.less 文件
localIdentName: '[name]__[local]--[hash:base64:5]',
},
},
}文件名改为 styles.module.less，引入方式调整为：
import styles from './styles.module.less';
function App() {
return <div className={styles.container}>Hello Less</div>;
}解决常见问题
若遇到版本兼容性问题，可尝试固定版本：
npm install less@3.12.2 less-loader@7.3.0 --save-dev对于 TypeScript 项目，需添加 .d.ts 文件声明 Less 模块：
// styles.d.ts
declare module '*.less' {
const classes: { [key: string]: string };
export default classes;
}
