一、在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中引入，一些公共的樣式文件，可以在這里引入。這里會(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 = falseVue.use(ElementUi);/* eslint-disable no-new */new Vue({ router, render: h => h(App)}).$mount('#app');3）在對(duì)應(yīng)的模板.vue文件中引入
發(fā)現(xiàn)一個(gè)問題，如果不在main.js中引入，直接在諸如app.vue文件中引入scss文件時(shí)候，雖然會(huì)將css代碼插入生成的html標(biāo)簽中成為內(nèi)聯(lián)樣式，但是不會(huì)講scss文件進(jìn)行解析，會(huì)引發(fā)問題。
難道scss文件必須首先在入口的index.js中引入，才能將scss解析，具體的vue中依賴某一個(gè)scss，還需要單獨(dú)再引入一次。
總結(jié)
以上所述是小編給大家介紹的Vue中引入樣式文件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
