溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
博主最近研究vue+webpack的時候想引入css文件死活引入不出來，在webpack-simple那里卻能引得出來，十分的納悶，然后細心的調試了一下，原來這webpack和webpack-simple兩個東西引入css文件有點區別。
首先說一下如何在webpack中引入css文件吧。博主的webpack是最新版本，不知1.0版本的是如何，所以下面說的是2.0以后的版本。首先在命令行中新建一個vue項目，如何新建請看我之前發的一篇博文，因為在webpack中，本身就有一個css-loader，所以不需要重新去下一個css-loader，只需要下載一個style-loader即可，下載style-loader的方法是在命令行中，在你所創建的項目目錄下，鍵入npm install style-loader --save-dev即可，--save-dev的意思是保存到你的項目里。之后在你的項目里打開build/webpack.base.conf.js文件中，在module的rules那里，加入關于css規則的代碼：
之后在App.vue文件中在style標簽項目寫入你想要引入的樣式：
本例引入的樣式是一個名為nam.css的文件，該文件只是讓頁面變藍，之后運行即可。
再來說一下webpack-simple是如何引入css文件的。webpack-simple從名字就可以看出他是一個簡化版，在webpack中即使不下載style-loader，不在webpack.base.conf.js中配置我上面說的內容也可以通過最后一個操作輕輕松松的引入css樣式。但是在webpack-simple中就不行，因為他是一個簡化版本，所以需要手動配置。
首先是下載webpack-simple，如上面一樣操作下載。下載完后需要在該項目目錄下鍵入npm install css-loader style-loader --save-dev，下載完后要在webpack.config.js的rules中加入一句css規則的代碼
注意，use里面的順序不能反過來，否則會報錯。
之后在src/assets/main.js文件中輸入import 'css路徑'即可。如：
import './assets/blue.css'
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
