首頁猿問 vue...

vue 引入css總是報(bào)錯(cuò)Module build failed: Syntax Error

JavaScript

慕慕森 2019-08-30 01:22:13

vueimportcss文件時(shí)webpack總是報(bào)錯(cuò)//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就會(huì)報(bào)錯(cuò),如下: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',//這個(gè)本來就在第一位'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 回答

嗶嗶one

TA貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊

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

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

FFIVE

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

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