Vue中引入樣式文件的方法

更新時(shí)間：2017年08月18日 14:22:00 作者：yyjourney

這篇文章主要介紹了Vue中引入樣式文件的方法,需要的朋友可以參考下

一、在vue中使用scss

首先進(jìn)行安裝如下依賴：

cnpm i sass-loader node-sass -D

二、vue中引入樣式文件

1）在index.html模板html文件中引入，這種方式引入的原樣編譯在生成的html文件中，如果想要通過(guò)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中引入，一些公共的樣式文件，可以在這里引入。這里會(huì)對(duì)scss文件進(jìn)行解析，將對(duì)應(yīng)的css代碼插入生成html文件的style標(biāo)簽中，成為內(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）在對(duì)應(yīng)的模板.vue文件中引入

發(fā)現(xiàn)一個(gè)問(wèn)題，如果不在main.js中引入，直接在諸如app.vue文件中引入scss文件時(shí)候，雖然會(huì)將css代碼插入生成的html標(biāo)簽中成為內(nèi)聯(lián)樣式，但是不會(huì)講scss文件進(jìn)行解析，會(huì)引發(fā)問(wèn)題。

難道scss文件必須首先在入口的index.js中引入，才能將scss解析，具體的vue中依賴某一個(gè)scss，還需要單獨(dú)再引入一次。

總結(jié)

以上所述是小編給大家介紹的Vue中引入樣式文件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue內(nèi)容分發(fā)slot(全面解析)
下面小編就為大家?guī)?lái)一篇Vue內(nèi)容分發(fā)slot(全面解析)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
詳解vue3?defineModel如何實(shí)現(xiàn)雙向綁定
隨著?Vue?3.3?引入的?defineModel?宏,開(kāi)發(fā)者可以更加簡(jiǎn)潔地實(shí)現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定,下面就跟隨小編一起來(lái)學(xué)習(xí)一下如何使用defineModel實(shí)現(xiàn)雙向綁定吧
2024-12-12
詳解用vue.js和laravel實(shí)現(xiàn)微信授權(quán)登陸
本篇文章主要介紹了詳解用vue.js和laravel實(shí)現(xiàn)微信授權(quán)登陸，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
django中使用vue.js的要點(diǎn)總結(jié)
在本篇文章里小編給各位整理了關(guān)于django中使用vue.js需要注意的地方以及相關(guān)知識(shí)點(diǎn)，需要的朋友們跟著學(xué)習(xí)參考下。
2019-07-07
Vue實(shí)現(xiàn)模糊查詢filter()實(shí)例詳解
因?yàn)榻赵趯W(xué)習(xí)并使用VUE,客戶有一個(gè)要求,要輸入框可模糊查詢并帶有下拉提示的應(yīng)用,數(shù)據(jù)從接口取,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)模糊查詢filter()的相關(guān)資料,需要的朋友可以參考下
2023-04-04
Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題
這篇文章主要介紹了Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問(wèn)題,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-11-11
詳解Vue爬坑之vuex初識(shí)
本篇文章主要介紹了詳解Vue爬坑之vuex初識(shí) ，Vue 的狀態(tài)管理工具 Vuex可以解決大型項(xiàng)目中子組件之間傳遞數(shù)據(jù)，有興趣的可以了解下
2017-06-06
vue3中實(shí)現(xiàn)異步組件的方法實(shí)例
前端開(kāi)發(fā)經(jīng)常遇到異步的問(wèn)題,請(qǐng)求函數(shù)、鏈接庫(kù)等,下面這篇文章主要給大家介紹了關(guān)于vue3中實(shí)現(xiàn)異步組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
Vue+Element?switch組件的使用示例代碼詳解
這篇文章主要介紹了Vue+Element?switch組件的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
Vue axios與Go Frame后端框架的Options請(qǐng)求跨域問(wèn)題詳解
這篇文章主要介紹了Vue axios與Go Frame后端框架的Options請(qǐng)求跨域問(wèn)題詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03