react如何使用less
在React项目中使用Less
要在React项目中使用Less预处理器，需要配置相关依赖和构建工具。以下是具体方法：
安装必要依赖
确保项目已安装less和less-loader：
npm install less less-loader --save-dev或使用yarn：
yarn add less less-loader --dev配置Webpack
对于使用create-react-app创建的项目，需要先暴露webpack配置：
npm run eject修改webpack.config.js文件，在module.rules部分添加Less规则：
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}创建并使用Less文件
创建.less文件，例如styles.less：
@primary-color: #1890ff;
.container {
background-color: @primary-color;
.text {
color: white;
}
}在组件中引入：
import './styles.less';
function App() {
return (
<div className="container">
<p className="text">Styled with Less</p>
</div>
);
}使用CRACO配置（不eject项目）
对于不想eject的项目，可以使用CRACO覆盖配置：
npm install @craco/craco craco-less --save-dev创建craco.config.js：
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};修改package.json中的scripts：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}使用CSS Modules
要启用Less的CSS Modules，修改webpack配置：
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
},
'less-loader'
]
}使用方式变为：
import styles from './styles.less';
function App() {
return <div className={styles.container}>Content</div>;
}
