react 如何引入less
在 React 项目中引入 Less
安装 less 和 less-loader 依赖包。通过 npm 或 yarn 安装：
npm install less less-loader --save-dev
# 或
yarn add less less-loader --dev配置 Webpack
修改 Webpack 配置文件（通常是 webpack.config.js 或 react-scripts 的覆盖配置）。添加 Less 支持：
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
};使用 Create React App 的项目
对于使用 create-react-app 创建的项目，需通过 react-app-rewired 和 customize-cra 覆盖配置：
- 安装必要依赖：
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,
modifyVars: { '@primary-color': '#1DA57A' } // 可选：覆盖 Less 变量
}
})
);- 修改
package.json中的脚本命令：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
}创建并使用 Less 文件
在组件中直接引入 .less 文件：
import './styles.less';处理 CSS Modules
若需启用 CSS Modules，修改 Webpack 配置中的 css-loader 选项：
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
}解决常见问题
样式不生效时，检查以下内容：
- 确保
less-loader版本与 Webpack 兼容 - 确认文件路径引用正确
- 检查 Webpack 配置是否被正确加载
通过以上步骤，即可在 React 项目中顺利集成 Less 预处理器。
