react 如何引入less
在 React 项目中引入 Less
安装 less 和 less-loader 依赖包
npm install less less-loader --save-dev配置 webpack
修改 webpack 配置以支持 Less 文件。在 webpack.config.js 中添加以下规则：
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}创建 React 组件并引入 Less
创建一个 Less 文件（例如 styles.less）：
@primary-color: #1890ff;
.container {
background-color: @primary-color;
padding: 20px;
}在 React 组件中引入该 Less 文件：
import './styles.less';
function App() {
return (
<div className="container">
Hello World
</div>
);
}使用 create-react-app 的项目配置
对于使用 create-react-app 创建的项目，需要先暴露 webpack 配置：
npm run eject然后按照上述 webpack 配置方法修改 config/webpack.config.js 文件。如果不希望 eject，可以使用 craco 或 react-app-rewired 来覆盖配置。
使用 craco 配置 Less
安装 craco 和 craco-less：
npm install @craco/craco craco-less --save创建 craco.config.js 文件：
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {},
javascriptEnabled: true,
},
},
},
},
],
};修改 package.json 中的 scripts：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
