用Vue-cli搭建的項(xiàng)目中引入css報(bào)錯(cuò)的原因分析
我最近在研究Vue的路上，今天遇到了個(gè)問題，在vue cli 引入css報(bào)錯(cuò)，后來查詢了很多資料，那么今天也算個(gè)學(xué)習(xí)筆記吧！
1.問題描述
之前用vue-cli搭建的項(xiàng)目，在main.js中引入elementUI庫(kù)中的css,或者在其他文件中（比如App.vue）引入自己的css文件（假如你的文件是在src目錄下），都會(huì)報(bào)一個(gè)相同的錯(cuò)。下如圖
經(jīng)過一番折騰之后發(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'
},
另外說明下假如你的css文件是在src目錄下的話就添加src的路徑，如上圖，element-ui或者mint-ui(minit-ui的我沒試過，個(gè)人認(rèn)為也要加上去webpack才能查找到)，假如你的css文件是在其他目錄下的，原理一樣。
注：以上是個(gè)人在開發(fā)中遇到的一個(gè)問題以及解決方式，如有出入或者不嚴(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)問題的解決
- vue-cli3搭建項(xiàng)目的詳細(xì)步驟
- 詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目
- VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
- vue-cli3.0 腳手架搭建項(xiàng)目的過程詳解
- 使用Vue-cli 3.0搭建Vue項(xiàng)目的方法
- vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟
相關(guān)文章
Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作
這篇文章主要介紹了Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Element?Plus組件Form表單Table表格二次封裝的完整過程
一般在后臺(tái)管理系統(tǒng)的開發(fā)中,都會(huì)遇到很多table,但每一次都去引入el-table就會(huì)導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js中Directive知識(shí)，感興趣的小伙伴們可以參考一下2016-09-09
vue進(jìn)入頁面時(shí)滾動(dòng)條始終在底部代碼實(shí)例
這篇文章主要介紹了vue進(jìn)入頁面時(shí)滾動(dòng)條始終在底部，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
el-upload http-request使用 多個(gè)文件上傳攜帶其他參數(shù)方式
這篇文章主要介紹了el-upload http-request使用 多個(gè)文件上傳攜帶其他參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3使用echart的兩種引入方式以及注意事項(xiàng)說明
這篇文章主要介紹了vue3使用echart的兩種引入方式以及注意事項(xiàng)說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了SpringBoot+Vue 前后端合并部署的配置方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
vue+Element-ui前端實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui前端實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue如何監(jiān)測(cè)數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測(cè)數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實(shí)例代碼圖文詳解給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07