react如何引入less文件
在React项目中引入Less文件
确保项目已安装less和less-loader依赖。若使用Create React App (CRA)，需手动配置或使用第三方工具。
安装依赖：
npm install less less-loader --save-dev配置Webpack
修改webpack.config.js，添加Less支持：
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
};创建并使用Less文件
创建styles.less文件：
@primary-color: #1890ff;
.container {
background: @primary-color;
}在组件中引入：
import './styles.less';
function App() {
return <div className="container">Content</div>;
}使用Create React App的解决方案
若项目基于CRA，需通过react-app-rewired或eject自定义配置：
安装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': '#1890ff' }
}
})
);更新package.json脚本：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build"
}注意事项
- 确保Node.js版本兼容
less-loader。 - 路径问题可能导致导入失败，使用相对路径时注意文件位置。
- 全局变量可通过
modifyVars配置，适用于主题定制。
