React中引入less、less-loader问题
作者：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版本即可。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。