踩坑記：Vue sass-loader V10設定全域性變數

 本文字數：349        預計閱讀時間：1.5分鐘

問題：Vue中使用 scss 設定全域性變數時 報錯 ~

版本資訊：

Vue 2.6.11     Cli 4.5.00

sass-loader 10.0.2

node-sass 4.14.1

Sass、Less是強化 CSS 的輔助工具，它並不是一門語言，但能有效提高開發效率，最直白的感受是大幅度減少了各種尋找Class，它在 CSS 語法的基礎上增加了變數 (variables)、巢狀 (nested rules)、混合 (mixins)、匯入 (inline imports) 等高階功能，這些拓展令 CSS 更加強大與優雅。

本次記錄在Vue中引入sass以及如何解決設定全域性變數時報錯的問題；

1、安裝sass-loader：

npm install -D sass-loader sass

然後你就可以匯入相應的檔案型別，或在 所有的.vue 檔案中這樣來使用：(注意style標籤必須設定lang屬性為scss)

<style lang="scss">
    //@import '全域性變數scss'
    $color: red;
</style>

2、設定全域性變數：

如果在每一個.vue檔案都引入import scss檔案，還是比較麻煩的，所以直接全域性搞定，無需任何地方引入 步驟如下：

安裝node-sass：

npm install node-sass --save-dev

設定全域性變數scss檔案：

//src > styles > variables.scss
    $blue: #324157;
    $red: #c03639;
    $pink: #e65d6e;

專案根目錄vue.config.js內設定sass路徑：

//project (root) > vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            scss: {
                additionalData: `@import "./src/styles/variables";` //注意
            }
        }
    }
};

PS：

由於sass-loader版本不同，loaderOptions 中 additionalData的鍵名也不同，基本各大技術論壇90%的scss設定全域性變數的文章都未提及V10的鍵名，這也是導致我踩坑一早上的罪魁禍首...em.....

sass-loader v8-，這個選項名是 "data"
sass-loader v8 中，這個選項名是 "prependData"
sass-loader v10+，這個選項名是 "additionalData"