react如何引入less
安装 less 和 less-loader
在 React 项目中引入 less，需要安装 less 和 less-loader。通过 npm 或 yarn 安装依赖包。
npm install less less-loader --save-dev或
yarn add less less-loader --dev配置 webpack
如果项目使用 create-react-app 创建且未 eject，需要通过 craco 或 react-app-rewired 修改 webpack 配置。以下是使用 craco 的配置方法。
安装 @craco/craco：
npm install @craco/craco --save在项目根目录创建 craco.config.js 文件，并添加以下配置：
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {}, // 可自定义 less 变量
javascriptEnabled: true,
},
},
},
},
],
};修改 package.json 脚本
将 package.json 中的 react-scripts 替换为 craco：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}创建并使用 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">
<h1>Hello Less</h1>
</div>
);
}
export default App;使用 CSS Modules（可选）
若需启用 CSS Modules，修改 craco.config.js：
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
cssLoaderOptions: {
modules: { localIdentName: '[local]_[hash:base64:5]' },
},
},
},
],
};在组件中引入：
import styles from './styles.less';
function App() {
return (
<div className={styles.container}>
<h1>Hello Less</h1>
</div>
);
}注意事项
- 确保项目使用的是 webpack 4 或更高版本。
- 如果遇到版本冲突，调整
less-loader版本至兼容版本。 - 自定义主题时，可通过
modifyVars覆盖 less 变量。
