在线等，挺急的！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)Unknownword3|//loadthestyles4|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.js
module.exports={
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','postcss-loader']
}
]
}
}
⚠️Whenpostcss-loaderisusedstandalone(withoutcss-loader)don'tuse@importinyourCSS,sincethiscanleadtoquitebloatedbundles
webpack.config.js(recommended)
module.exports={
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
{loader:'css-loader',options:{importLoaders:1}},
'postcss-loader'
]
}
]
}
}