vue 安裝scss

1.安裝插件

npm install node-sass --save-dev
npm install sass-loader --save-dev

在App頁面測試是否可用,在style 上添加<style lang="scss">
vue-cli3 版本以上安裝完就可以使用，如果頁面報錯，在package.json 中檢查 sass-loader 的版本，最新版8.0版本，版本過高無法解析會報錯，將版本降支7.3.1 就好了，親測可用

2.scss 設置全局變量

　　先安裝插件 sass-resources-loader

　　然后修改vue-cli的build/utils.js找到scss的加載設置：

　　

 

 　　修改為：

　　

 

 　　其中path.resolve需要引入待傳入的scss文件，--dirname 表示當前目錄，然后一步一步找到自己需要引入的文件

　　注：變量文件如引入圖片的話，需注意路徑

3.scss 使用

1.$開頭，設置變量 $color:#468feb; 
2.嵌套使用{}
3.@extend 類名; 繼承
4.@mixin（定義） @include（引用）混合器