Vue中引入樣式文件的方法
更新時間：2017年08月18日 14:22:00 作者：yyjourney
這篇文章主要介紹了Vue中引入樣式文件的方法,需要的朋友可以參考下
一、在vue中使用scss
首先進行安裝如下依賴：
cnpm i sass-loader node-sass -D
二、vue中引入樣式文件
1）在index.html模板html文件中引入，這種方式引入的原樣編譯在生成的html文件中，如果想要通過link引入外部的樣式文件，建議使用這種方式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis</title> <link rel="stylesheet" href="./static/reset.css" rel="external nofollow" > </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
2）在入口js文件main.js中引入，一些公共的樣式文件，可以在這里引入。這里會對scss文件進行解析，將對應(yīng)的css代碼插入生成html文件的style標簽中，成為內(nèi)聯(lián)樣式。
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUi from 'element-ui'
import '@/common/scss/theme-blue.scss'
Vue.config.productionTip = false
Vue.use(ElementUi);
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app');
3）在對應(yīng)的模板.vue文件中引入
發(fā)現(xiàn)一個問題，如果不在main.js中引入，直接在諸如app.vue文件中引入scss文件時候，雖然會將css代碼插入生成的html標簽中成為內(nèi)聯(lián)樣式，但是不會講scss文件進行解析，會引發(fā)問題。
難道scss文件必須首先在入口的index.js中引入，才能將scss解析，具體的vue中依賴某一個scss，還需要單獨再引入一次。
總結(jié)
以上所述是小編給大家介紹的Vue中引入樣式文件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue v-for循環(huán)出來的數(shù)據(jù)動態(tài)綁定值問題
這篇文章主要介紹了vue v-for循環(huán)出來的數(shù)據(jù)動態(tài)綁定值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家介紹了關(guān)于如何基于Vue-cli快速搭建項目的完整步驟，文中通過示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章通過實例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)、獨享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)，本文重點介紹Vue路由守衛(wèi)案例代碼,需要的朋友可以參考下2023-02-02
今天小編就為大家分享一篇vue.js父子組件通信動態(tài)綁定的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于vue-seamless-scroll實現(xiàn)無縫滾動效果
這篇文章主要為大家詳細介紹了基于vue-seamless-scroll實現(xiàn)無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在開始學(xué)習(xí)vue的時候,對于新手安裝這個環(huán)境是真的搞人心態(tài),不友好,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
swiper是我之前做前端頁面會用到的一個插件,我自己認為是非常好用的。這篇文章給大家介紹vue-swiper的使用教程，感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue iview實現(xiàn)動態(tài)新增和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06