詳解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)文章
網(wǎng)頁整體變灰白色(兼容各瀏覽器)實(shí)例，需要的朋友可以參考一下2013-04-04
js實(shí)現(xiàn)的常用的左側(cè)導(dǎo)航效果
使用js簡(jiǎn)單實(shí)現(xiàn)下常用的左側(cè)導(dǎo)航效果為提高導(dǎo)航性能而生，各位朋友可以參考應(yīng)用，希望對(duì)大家有所幫助2013-10-10
Bpmn.js activiti 流程編輯器詳細(xì)教程
流程編輯器是一種用于創(chuàng)建、編輯和管理流程圖的工具,它提供了一個(gè)可視化的界面,使用戶能夠以圖形化的方式定義和配置流程的各個(gè)步驟、條件和流程間的關(guān)系,說明關(guān)于bpmn.js的一些事件, 通過本文你可以了解到,感興趣的朋友一起看看吧2023-10-10
這篇文章主要是對(duì)JavaScript作用域和作用域鏈作簡(jiǎn)單的介紹，希望能幫助大家更好的學(xué)習(xí)JavaScript2013-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)打卡簽到頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單效果
這篇文章主要為大家詳細(xì)介紹了三級(jí)聯(lián)動(dòng)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
本文主要介紹了文件上傳插件SWFUpload使用指南,SWFUpload是一個(gè)flash和js相結(jié)合而成的文件上傳插件，其功能非常強(qiáng)大。需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了Express框架req?res對(duì)象使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本文主要介紹了原生JS實(shí)現(xiàn)簡(jiǎn)單屏幕截圖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
js調(diào)用activeX獲取u盤序列號(hào)的代碼
js調(diào)用activeX獲取u盤序列號(hào)的代碼，需要的朋友可以參考下。2011-11-11