react如何引入less
在React项目中引入Less的步骤
确保项目已安装less和less-loader依赖。若未安装，可通过以下命令添加：
npm install less less-loader --save-dev
# 或
yarn add less less-loader --dev修改Webpack配置以支持Less文件解析。对于Create React App (CRA)项目，需先执行npm run eject暴露配置，然后在webpack.config.js中找到module.rules数组，添加以下规则：
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}配置TypeScript支持（可选）
若项目使用TypeScript，需在src/react-app-env.d.ts中添加类型声明：
declare module '*.less' {
const classes: { [key: string]: string };
export default classes;
}创建并使用Less文件
新建.less文件（如styles.less），编写样式：
@primary-color: #1890ff;
.container {
background: @primary-color;
}在React组件中引入：
import './styles.less';
function App() {
return <div className="container">Content</div>;
}注意事项
- CRA项目需通过
npm run eject后才能修改Webpack配置，否则需使用craco或react-app-rewired覆盖配置。 - 确保
css-loader和style-loader已安装，它们是处理样式依赖链的必要组件。 - 若遇到版本兼容问题，可尝试指定
less-loader版本，如yarn add less-loader@7.3.0。
