react如何使用less
使用 Less 在 React 项目中
在 React 项目中使用 Less 需要配置构建工具（如 webpack）以支持 Less 文件的编译。以下是具体方法：
安装依赖
确保项目已安装 less 和 less-loader。通过 npm 或 yarn 安装：
npm install less less-loader --save-dev
# 或
yarn add less less-loader --dev配置 webpack
修改 webpack.config.js（通常位于项目根目录或 config 目录），添加 Less 支持：
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
};创建 Less 文件
在组件目录中创建 .less 文件，例如 styles.less：
@primary-color: #1890ff;
.container {
background: @primary-color;
padding: 20px;
}引入 Less 文件
在 React 组件中直接导入 Less 文件：
import './styles.less';
function App() {
return <div className="container">Hello Less!</div>;
}使用 Create React App 的项目配置
如果项目基于 create-react-app（CRA），需通过 craco 或 eject 自定义配置：
方法 1：使用 CRACO
-
安装
craco-less：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, }, }, }, }, ], };
3. 修改 `package.json` 的脚本：
```json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}方法 2：Eject 后配置
运行 npm run eject 暴露 webpack 配置，手动添加 Less 规则（参考前述 webpack 配置）。
注意事项
- 确保
css-loader和style-loader已安装。 - 若需修改 Less 变量（如 Ant Design 主题），通过
modifyVars配置。 - 对于 TypeScript 项目，需在
global.d.ts中添加 Less 文件类型声明：declare module '*.less' { const content: { [className: string]: string }; export default content; }
