詳解webpack和webpack-simple中如何引入css文件
博主最近研究vue+webpack的時(shí)候想引入css文件死活引入不出來，在webpack-simple那里卻能引得出來，十分的納悶，然后細(xì)心的調(diào)試了一下，原來這webpack和webpack-simple兩個(gè)東西引入css文件有點(diǎn)區(qū)別。
首先說一下如何在webpack中引入css文件吧。博主的webpack是最新版本，不知1.0版本的是如何，所以下面說的是2.0以后的版本。首先在命令行中新建一個(gè)vue項(xiàng)目，如何新建請(qǐng)看我之前發(fā)的一篇博文，因?yàn)樵趙ebpack中，本身就有一個(gè)css-loader，所以不需要重新去下一個(gè)css-loader，只需要下載一個(gè)style-loader即可，下載style-loader的方法是在命令行中，在你所創(chuàng)建的項(xiàng)目目錄下，鍵入npm install style-loader --save-dev即可，--save-dev的意思是保存到你的項(xiàng)目里。之后在你的項(xiàng)目里打開build/webpack.base.conf.js文件中，在module的rules那里，加入關(guān)于css規(guī)則的代碼：
之后在App.vue文件中在style標(biāo)簽項(xiàng)目寫入你想要引入的樣式：
本例引入的樣式是一個(gè)名為nam.css的文件，該文件只是讓頁面變藍(lán)，之后運(yùn)行即可。
再來說一下webpack-simple是如何引入css文件的。webpack-simple從名字就可以看出他是一個(gè)簡(jiǎn)化版，在webpack中即使不下載style-loader，不在webpack.base.conf.js中配置我上面說的內(nèi)容也可以通過最后一個(gè)操作輕輕松松的引入css樣式。但是在webpack-simple中就不行，因?yàn)樗且粋€(gè)簡(jiǎn)化版本，所以需要手動(dòng)配置。
首先是下載webpack-simple，如上面一樣操作下載。下載完后需要在該項(xiàng)目目錄下鍵入npm install css-loader style-loader --save-dev，下載完后要在webpack.config.js的rules中加入一句css規(guī)則的代碼
注意，use里面的順序不能反過來，否則會(huì)報(bào)錯(cuò)。
之后在src/assets/main.js文件中輸入import 'css路徑'即可。如：
import './assets/blue.css'
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
onmouseover事件和onmouseout事件全面理解
最近兩天在溫習(xí)onmouseover事件和onmouseout事件，其實(shí)里面有很多深?yuàn)W的知識(shí)，接下來小編給大家?guī)砹薿nmouseover事件和onmouseout事件全面了解，感興趣的朋友一起看下2016-08-08
Draggable Elements 元素拖拽功能實(shí)現(xiàn)代碼
雖說js框架到處都是, 都封裝了很多實(shí)用的功能,能快速的讓我們實(shí)現(xiàn)如動(dòng)畫,元素拖拽等功能, 不過由于好奇心的驅(qū)使, 有時(shí)想一探究竟, 看看一些功能是如何實(shí)現(xiàn)的2011-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序下拉框組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
前端的小伙伴大概都知道，js中的var變量存在變量提升，在es6以后隨著let變量的出現(xiàn)，變量提升問題得以解決，那么變量提升的原理是什么，es6又是怎么解決變量提升問題的，下面我們來共同探尋答案2023-05-05
這篇文章主要介紹了深入了解JavaScript代碼覆蓋 ,代碼覆蓋提供有關(guān)是否以及可選地應(yīng)用程序的某些部分被執(zhí)行的頻率的信息。它通常用于判定一個(gè)測(cè)試套件執(zhí)行特定代碼庫的全面程度。,需要的朋友可以參考下2019-06-06
JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
把JS與CSS寫在同一個(gè)文件里的書寫方法...2007-06-06
這篇文章主要介紹了JS手寫一個(gè)自定義Promise操作,結(jié)合實(shí)例形式分析了JS自定義Promise的實(shí)現(xiàn)與使用相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
由于uniapp暫無釘釘授權(quán)登錄所以本文將釘釘掃碼登錄作為網(wǎng)頁嵌入uniapp，最終實(shí)現(xiàn)釘釘掃碼登錄app，本文通過實(shí)例代碼給大家介紹uniapp釘釘掃碼登錄功能，感興趣的朋友一起看看吧2021-12-12
這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10