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 Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
这篇文章主要介绍了React Native中ScrollView组件轮播图与ListView渲染列表组件用法,结合实例形式详细分析了ScrollView组件轮播图与ListView渲染列表组件具体功能、使用方法与操作注意事项,需要的朋友可以参考下2020-01-01在react-antd中弹出层form内容传递给父组件的操作
这篇文章主要介绍了在react-antd中弹出层form内容传递给父组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解
今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能,前端我们使用 Reactjs + Axios 来搭建前端上传文件应用,后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2022-06-06
最新评论