詳解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的文件，該文件只是讓頁(yè)面變藍(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í)有所幫助，也希望大家多多支持億速云。