博主在初學(xué)webpack的時(shí)候可是吃了不少的苦頭助琐，其中就包括導(dǎo)入css文件所帶來(lái)的各種BUG惜纸，其中一些就特別的棘手盯仪，順手就寫(xiě)篇博客分享給大家疟暖，希望跟博主遇到同樣問(wèn)題的伙伴們能借此早日解決自己的BUG卡儒。（由于博主是第一次寫(xiě)博客，所以有專(zhuān)業(yè)術(shù)語(yǔ)用的不對(duì)的地方希望大家指正哈~當(dāng)然使用各種cli的用戶(hù)應(yīng)該不會(huì)碰到這種問(wèn)題= =搬運(yùn)自CSDN）
在使用webpack搭建vue-loader工程時(shí)俐巴，常遇到的問(wèn)題可能有babel在es6到es5的轉(zhuǎn)譯問(wèn)題骨望，這個(gè)通過(guò)vue-cli腳手架搭建的項(xiàng)目可以基本避免遇到這個(gè)問(wèn)題，接著就是博主所遇到的十分蛋疼的css文件引入問(wèn)題了欣舵，博主在視頻學(xué)習(xí)時(shí)所學(xué)到的是在引入之前要先安裝style-loader和css-loader擎鸠，具體代碼如下
npm install style-loader css-loader --save-dev
如上代碼，在webpack.base.conf.js中的module:{rules[]}中加入對(duì)css尾綴的識(shí)別代碼缘圈，在早期的文檔中l(wèi)oader：中并沒(méi)有-loader尾綴糠亩，在2.0中必須加入此尾綴可以解決問(wèn)題
接著在main.js用es6語(yǔ)法引入相應(yīng)路徑的css即可
import './assets/bower_components/bootstrap/dist/css/bootstrap.min.css'
博主在這里使用了bower下載的bootstrap組件
注：以上方法是正確的配置方法虐骑，如果缺少配置一環(huán)的話(huà)出現(xiàn)的報(bào)錯(cuò)應(yīng)該是在打開(kāi)瀏覽器的console可以看到無(wú)法識(shí)別@符號(hào)之類(lèi)的blabla報(bào)錯(cuò)信息
但是，但是Ｊ晗摺Ｍ⒚弧！４沽取颠黎！最致命的問(wèn)題就這樣出現(xiàn)了！
我就想問(wèn)了滞项，這TM是什么鬼Ｏ凉椤！Ｎ呐小过椎！我甚至都已經(jīng)按照人家的官方文檔配置了，還能爆出這種錯(cuò)誤戏仓？疚宇？？赏殃？敷待？
可能圖片看不太清楚，具體報(bào)錯(cuò)就跟標(biāo)題一樣Module build failed: Unknown word
這句話(huà)的意思是模塊創(chuàng)建失斎嗜取：未知文字榜揖，當(dāng)然下面的報(bào)錯(cuò)信息就都沒(méi)什么卵用了，博主困擾了好久抗蠢，終于在git的論壇里找到了同樣問(wèn)題的小伙伴（百度真的不給力举哟。。迅矛。）附上鏈接https://github.com/webpack-contrib/css-loader/issues/352
這里面的討論區(qū)只有兩個(gè)答案炎滞，一個(gè)就是博主在前面提到過(guò)的在傳統(tǒng)的style!css之后加上-loader變成style-loader!css-loader即可，另一種就是诬乞。。钠导。不配置這項(xiàng)信息震嫉，沒(méi)錯(cuò)就是備注掉整個(gè)css配置項(xiàng)。牡属。票堵。。像這樣
// {
// test: /\.css$/,
// loader: 'style-loader!css-loader'
// }
然后博主就跟著這個(gè)偏方走了一遭逮栅，結(jié)果真的悴势。窗宇。。運(yùn)行成功了特纤，恩至今沒(méi)想通為啥军俊，不過(guò)既然能解決問(wèn)題，大家不妨試一試~
