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