# [Vue] Vue 專案內設定 Sass 全域變數

###### tags: `Vue.js` `Vue CLI` `Sass`

想在 Vue 專案中加入 Sass 全域變數，可以參考 [Vue CLI 官方的教學](https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9 "向预处理器 Loader 传递选项")

在 vue.config.js 檔案中撰寫

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // sass-loader@^7.0.0 用 data
        data: '@import "@/assets/style/variables.sass";', // 只有一個檔案的寫法
        data: `@import "@/assets/style/variables.sass";@import "@/assets/style/mixins.sass";`, // 有多個檔案的寫法
        
        // sass-loader@^8.0.0 用 prependData
        prependData: `@import "~@/assets/style/_variables.sass"`,
        
        // sass-loader@^9.0.0 用 additionalData
        additionalData: `@import "~@/assets/style/_variables.sass"`,
      },
    },
  },
}

* data：很久以前撰寫專案的設定，不確定寫法是否正確（結尾要加 **;** ？），印象中專案有正常運作
* prependData：專案運行時會出現 `Syntax Error: SassError: expected ";".`，加了 **;** 又出現 `Syntax Error: SassError: semicolons aren't allowed in the indented syntax.`，找解法時大部分遇到問題的都是要使用 SCSS，跟我要用 Sass 的情況不一樣，最後將 sass-loader 更新到 10.1.0 就沒問題了！不知道是這版的問題還是跟其他套件有衝突，下方是當時的環境

  /* 
   * node: v14.15.0
   * npm: 6.14.8 */
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.1.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }

* additionalData：目前（2020-12-29）可以正常運作

## 參考資料
* [sass-loader](https://github.com/webpack-contrib/sass-loader "sass-loader - GitHub")

---

:::info
建立日期：2020-12-29
更新日期：2020-12-29
:::