萌新！webpack安装less报错各位有什么建议？

Question

我的用webpack4配置react的时候安装less依赖，遇到问题这是webpack.config.js
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
{loader:"css-loader"},
{loader:"style-loader"},
{loader:"postcss-loader",options:{plugins:()=>[autoprefixer()]}}
]
不知道为啥报错，找了很久也没找到解决办法
ERRORin./src/pages/home/home.less(./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader!./node_modules/postcss-loader/src??ref--4-3!./src/pages/home/home.less)
Modulebuildfailed(from./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(2:1)Unknownword
1|
>2|varcontent=require("!!../../../node_modules/postcss-loader/src/index.js??ref--4-3!./home.less");
|^
3|
4|if(typeofcontent==='string')content=[[module.id,content,'']];
但是当我把
{loader:"style-loader"},
{loader:"postcss-loader",options:{plugins:()=>[autoprefixer()]}}
注释掉了有不报错了

Answer 1

如果按照你配置的loader顺序，webpack首先会用postcss-loader去处理你的样式文件，如果你的样式用的是less，那么应该把less-loader放在最后边。webpack用loader处理文件的时候是倒着来的顺序。或者你把postcss-loader的配置放到css-loader的配置之上，试试

Answer 2

这是我的less配置，你试试{test:/\.(css|less)$/,use:['style-loader','css-loader','postcss-loader',{loader:'less-loader',options:{javascriptEnabled:true,},},],}