Vue中引入樣式文件的方法

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:32:15

Vue中引入樣式文件的方法

Vue中引入樣式文件的方法:一、在vue中使用scss 首先進(jìn)行安裝如下依賴： cnpm i sass-loader node-sass -D 二、vue中引入樣式文件 1）在index.html模板html文件中引入，這種方式引入的原樣編譯在生成的html文件中，如果想要通過link引入外部的樣式文件，建議使用這種方式：

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue中引入樣式文件的方法:一、在vue中使用scss 首先進(jìn)行安裝如下依賴： cnpm i sass-loader node-sass -D 二、vue中引入樣式文件 1）在index.html模板html文件中引入，這種方式引入的原樣編譯在生成的html文件中，如果想要通過link引入外部的樣式文件，建議使用這種方式：

一、在vue中使用scss

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

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文件進(jìn)行解析，將對應(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）在對應(yīng)的模板.vue文件中引入

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

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

總結(jié)

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com