前言
官方的 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版本即可。相关原因可以查看less-loder Issues
对webpack不算熟悉,若有错,欢迎留言指导!