在线等，挺急的！vue 引入css总是报错Module build failed: Syntax Error 谢谢哈~

Question

vueimportcss文件时webpack总是报错
//Inpackage.json:
devDependencies:{
"less":"^3.8.1",
"less-loader":"^4.1.0",
"vue-style-loader":"^3.1.2",
"style-loader":"^0.23.1",
"css-loader":"^0.28.11",
...
}
//webpack.base.conf.js文件配置
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
},
//main.js引入
import'photoswipe/dist/photoswipe.css'
然后webpack就会报错,如下:
Modulebuildfailed:SyntaxError
(5:1)Unknownword
3|//loadthestyles
4|varcontent=require("!!../../css-loader/index.js??ref--7-1!../../postcss-loader/lib/index.js??ref--7-2!./photoswipe.css");
>5|if(typeofcontent==='string')content=[[module.id,content,'']];
|^
6|if(content.locals)module.exports=content.locals;
7|//addthestylestotheDOM
查到的解决方法都解决不了:1.调换webpack配置文件的顺序(无效),将style-loader放到第一位:
{
test:/\.css$/,
use:[
'style-loader',//这个本来就在第一位
'css-loader',
'postcss-loader'
]
},
2.重装style-loader(无效)3.仅留下css-loader(无效)
{
test:/\.css$/,
loader:'style-loader'
}
github上面的bug演示地址github上面关于此问题的讨论github上面关于此问题的讨论2

Answer 1

后来多次查询后,将webpack.base.conf.js注释掉即可,VUE-loader已经包含对css的编译,注释掉也不会影响系统.{test:/\.css$/,//loader:'style-loader!css-loader!postcss-loader',/*use:['style-loader','css-loader','postcss-loader']*/},

Answer 2

Aftersettingupyourpostcss.config.js,addpostcss-loadertoyourwebpack.config.js.Youcanuseitstandaloneorinconjunctionwithcss-loader(recommended).Useitaftercss-loaderandstyle-loader,butbeforeotherpreprocessorloaderslikee.gsass|less|stylus-loader,ifyouuseany.webpack.config.jsmodule.exports={module:{rules:[{test:/\.css$/,use:['style-loader','postcss-loader']}]}}⚠️Whenpostcss-loaderisusedstandalone(withoutcss-loader)don'tuse@importinyourCSS,sincethiscanleadtoquitebloatedbundleswebpack.config.js(recommended)module.exports={module:{rules:[{test:/\.css$/,use:['style-loader',{loader:'css-loader',options:{importLoaders:1}},'postcss-loader']}]}}