要如何在我們的vue項目中全局引入scss文件呢怪得？
image.png
import Vue from 'vue'
import App from './App'
import router from './router'
import './common/x1.scss'
main.js可以直接import css文件，也可以直接import scss文件卑硫。
在index.html中l(wèi)ink引入的話徒恋，不起作用。
公共樣式可以寫在app.vue這個父組件的style標簽中欢伏，這樣我們寫的子組件就能繼承這些公共樣式入挣，但是！Ｏ跖 径筏！我們自定義的scss的變量繼承不了！障陶！
在引入適配hotcss.css的時候 需要適配css和js放在最前面 否則會失效
image.png
如果我們想使用公共的scss樣式變量（比如app的主題顏色）滋恬，我們就只能是每寫一個.vue文件都要在style標簽里面@import “global.scss”這個公共scss樣式文件，但是這樣做抱究，會很麻煩恢氯。
（上述情況，less同sass一樣媳维，存在這些問題酿雪，但是less沒有以下解決辦法，sass有侄刽。）
但也有辦法解決指黎，步驟如下：
1.安裝node-sass、sass-loader州丹、style-loader
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
2.安裝sass-resources-loader
cnpm install sass-resources-loader --save-dev
3.修改build中的utils.js ==>exports.cssLoaders里面修改（這一步看仔細了 我修改的時候 出錯了）
scss: generateLoaders('sass').concat( ==> (這里修改)
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname,'../src/assets/style/main.scss'),
}
}
)
最后在vue組件中的style標簽中添加lang="scss"醋安，就ok了。這樣我們就實現(xiàn)了全局引入scss墓毒。
