用Vue-cli搭建的項目中引入css報錯的原因分析
更新時間：2017年07月20日 17:24:56 作者：紙上得來終覺淺-絕知此事要躬行
本篇文章主要介紹了用Vue-cli搭建的項目中引入css報錯的原因分析，具有一定的參考價值，感興趣的小伙伴們可以參考一下
我最近在研究Vue的路上，今天遇到了個問題，在vue cli 引入css報錯，后來查詢了很多資料，那么今天也算個學(xué)習(xí)筆記吧！
1.問題描述
之前用vue-cli搭建的項目，在main.js中引入elementUI庫中的css,或者在其他文件中（比如App.vue）引入自己的css文件（假如你的文件是在src目錄下），都會報一個相同的錯。下如圖
經(jīng)過一番折騰之后發(fā)現(xiàn)需要在build文件下的webpack.base.conf.js中加上下面的代碼即可
{
test: /\.css$/,
include: [
/src/,//表示在src目錄下的css需要編譯
'/node_modules/element-ui/lib/' //增加此項
],
loader: 'style-loader!css-loader'
},
另外說明下假如你的css文件是在src目錄下的話就添加src的路徑，如上圖，element-ui或者mint-ui(minit-ui的我沒試過，個人認(rèn)為也要加上去webpack才能查找到)，假如你的css文件是在其他目錄下的，原理一樣。
注：以上是個人在開發(fā)中遇到的一個問題以及解決方式，如有出入或者不嚴(yán)謹(jǐn)?shù)胤竭€請指出！希望能夠幫到您。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue使用$emit傳遞參數(shù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue3頭像上傳組件功能,用到了自定義組件v-model的雙向綁定，使用axios + formData 上傳文件，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
Vue項目的網(wǎng)絡(luò)請求代理到封裝步驟詳解
這篇文章主要介紹了Vue項目的網(wǎng)絡(luò)請求代理到封裝步驟,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue?退出登錄?清除localStorage的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了詳解Vue串聯(lián)過濾器的使用場景，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了基于vue hash模式微信分享#號的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vuex的初探與實戰(zhàn)小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
解決VMware中vmware-vmx.exe進(jìn)程無法關(guān)閉以及死機等問題
這篇文章主要介紹了解決VMware中vmware-vmx.exe進(jìn)程無法關(guān)閉以及死機等問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue directive全局自定義指令實現(xiàn)按鈕級別權(quán)限控制的操作方法
這篇文章主要介紹了vue directive全局自定義指令實現(xiàn)按鈕級別權(quán)限控制,本文結(jié)合實例代碼對基本概念做了詳細(xì)講解，需要的朋友可以參考下2023-02-02