溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、在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文件進行解析，將對應的css代碼插入生成html文件的style標簽中，成為內聯樣式。
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）在對應的模板.vue文件中引入
發現一個問題，如果不在main.js中引入，直接在諸如app.vue文件中引入scss文件時候，雖然會將css代碼插入生成的html標簽中成為內聯樣式，但是不會講scss文件進行解析，會引發問題。
難道scss文件必須首先在入口的index.js中引入，才能將scss解析，具體的vue中依賴某一個scss，還需要單獨再引入一次。
總結
以上所述是小編給大家介紹的Vue中引入樣式文件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
