# Vue 內導入 global scss variables 的方法
###### tags: `Vue` `前端筆記`

除了自行在每個 Vue 檔內的 `style` 區塊 `import` scss 的顏色檔案外，也可以透過 `sass-loader` 這個 plugin 協助開發者更方便讀取 scss 的共用顏色檔案。

## 慢慢地在需要的檔案內 `import` 共用 scss 檔案

如果該 compoennt 需要讀取共用 scss 的話都要先 `import`，才可以讀取：

// MyComponent.vue

<style lang="scss">
@import "./scss/_variables.scss";
@import "./scss/_mixins.scss";
@import "./scss/_functions.scss";
/* ... */
</style>

這樣子每個 component 都要 `import` 有點麻煩。

## 省略 `import`，全部的 components 都可以讀取

要達成這個目標需要以下三個 plugins `node-sass`、`sass` 及 `sass-loader`。
1. 先無腦下載

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

2. 進入 `vue.config.js` 中建立 config 物件

// 以下是 default 的樣子
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 以上是 default 的樣子
  
  // 建立 config 物件
  css: {
    loaderOptions: {
      scss: {
        // scss 的檔名記得加 ; 而且是要加在 double quote 之外！！
        // `@import "path..";`
        additionalData: `@import "@/assets/scss/colors.scss";`
      }
      // 如果是 sass 檔的話就寫
      sass: {
        // sass 的檔名不用加 ;
        additionalData: `@import "@/assets/scss/colors.sass"`
      }
    }
  }
})

3. 之後在 scss 檔案中建立變數，然後 components 內就可以直接取用了，不需要再手動 `@import`

### `sass-loader` 版本不同，config 的 key name 也會不同

如果 `sass-loader` 版本為 8.x 的話 `additionalData` 需要改成 `prependData`，以下程式碼參照[官方文件](https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders)：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      // @/ is an alias to src/
      // so this assumes you have a file named `src/variables.sass`
      // Note: this option is named as "prependData" in sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      // by default the `sass` option will apply to both syntaxes
      // because `scss` syntax is also processed by sass-loader underlyingly
      // but when configuring the `prependData` option
      // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
      // in that case, we can target the `scss` syntax separately using the `scss` option
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // pass Less.js Options to less-loader
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

也可看 sass-loader 的[文件](https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0)。

如果寫錯，webpack 也會有提示：

## 參考資料
1. [Working with CSS](https://cli.vuejs.org/guide/css.html)
2. [[重構倒數第27天] - 在 Vue 各種 CSS 的引入使用](https://ithelp.ithome.com.tw/articles/10260013)
3. [Vuetify & Webpack - Error compiling custom variables (sass-loader failed)](https://stackoverflow.com/questions/66505054/vuetify-webpack-error-compiling-custom-variables-sass-loader-failed)