React中引入less、less-loader问题
更新时间:2024年01月24日 10:05:35 作者:dayTimeAffect
这篇文章主要介绍了React中引入less、less-loader问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
官方的 create-react-app创建的项目默认是不支持 less 的,但是又写不惯其他的预处理语言
方法
第一步
//安装 less与less-loader yarn add less less-loader --save-dev
第二步
//弹出默认配置,create-react-app创建的项目默认是没有webpack.config.js的 yarn eject

第三步
// 在webpack.config.js文件中,仿sass的引入
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
}


注意
TypeError: this.getOptions is not a function 错误

这是由于less-loader版本过高导致,使用7.3.0版本即可。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
解析React中useMemo与useCallback的区别
这篇文章主要介绍了React中useMemo与useCallback的区别,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
react 路由权限动态菜单方案配置react-router-auth-plus
这篇文章主要为大家介绍了react路由权限动态菜单方案react-router-auth-plus傻瓜式配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08
详解React中传入组件的props改变时更新组件的几种实现方法
这篇文章主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-09-09


最新评论