博主最近研究vue+webpack的時候想引入css文件死活引入不出來，在webpack-simple那里卻能引得出來，十分的納悶，然后細心的調(diào)試了一下，原來這webpack和webpack-simple兩個東西引入css文件有點區(qū)別。

首先說一下如何在webpack中引入css文件吧。博主的webpack是最新版本，不知1.0版本的是如何，所以下面說的是2.0以后的版本。首先在命令行中新建一個vue項目，如何新建請看我之前發(fā)的一篇博文，因為在webpack中，本身就有一個css-loader，所以不需要重新去下一個css-loader，只需要下載一個style-loader即可，下載style-loader的方法是在命令行中，在你所創(chuàng)建的項目目錄下，鍵入npm install style-loader --save-dev即可，--save-dev的意思是保存到你的項目里。之后在你的項目里打開build/webpack.base.conf.js文件中，在module的rules那里，加入關(guān)于css規(guī)則的代碼：

之后在App.vue文件中在style標簽項目寫入你想要引入的樣式：

本例引入的樣式是一個名為nam.css的文件，該文件只是讓頁面變藍，之后運行即可。

再來說一下webpack-simple是如何引入css文件的。webpack-simple從名字就可以看出他是一個簡化版，在webpack中即使不下載style-loader，不在webpack.base.conf.js中配置我上面說的內(nèi)容也可以通過最后一個操作輕輕松松的引入css樣式。但是在webpack-simple中就不行，因為他是一個簡化版本，所以需要手動配置。

首先是下載webpack-simple，如上面一樣操作下載。下載完后需要在該項目目錄下鍵入npm install css-loader style-loader --save-dev，下載完后要在webpack.config.js的rules中加入一句css規(guī)則的代碼

注意，use里面的順序不能反過來，否則會報錯。

之后在src/assets/main.js文件中輸入import 'css路徑'即可。如：

import './assets/blue.css'

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論