首頁猿問在線等，挺急的！vue...

在線等，挺急的！vue 引入css總是報錯Module build failed: Syntax Error 謝謝哈~

JavaScript

藍(lán)山帝景 2019-08-24 22:43:12

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.調(diào)換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上面關(guān)于此問題的討論github上面關(guān)于此問題的討論2

查看完整描述

2 回答

繁星coding

TA貢獻(xiàn)1797條經(jīng)驗獲得超4個贊

后來多次查詢后,將webpack.base.conf.js注釋掉即可,VUE-loader已經(jīng)包含對css的編譯,注釋掉也不會影響系統(tǒng).{test:/\.css$/,//loader:'style-loader!css-loader!postcss-loader',/*use:['style-loader','css-loader','postcss-loader']*/},

反對回復(fù) 2019-08-24

翻閱古今

TA貢獻(xiàn)1780條經(jīng)驗獲得超5個贊

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']}]}}