---
tags: Vue,
disqus: hackmd
---

# [Vue]SCSS

## 安裝

此處先假定使用CLI的方式建立專案，這裡只挑出與css安裝有關的畫面

1. 選擇`Manually select features`
2. 這裡是可以選擇你要安裝那些功能，選到`CSS pre-processors`然後按下空白鍵，就可以看到()裡多一個*字，這樣就是選上了，全部你要的功能都選完後按下`enter(回車)`
3. 這裡可以挑選要你要撰寫css的方式，比較特別的地方是`Sass/SCSS`的選項有兩種，差異性最後會介紹到，這裡可以先選擇`dart-sass`

> 如果你不是使用CLI建立專案或不是選`Manually select features`的方式建立專案，那就要自己手動加上，可以參考[使用预处理器](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#stylus)

## 使用

安裝成功後，在style加上一個`lang="scss"`就可以使用了

## 共享全局變量

假設你專案裡的很多地方都需要用到某個顏色，這時候就可以用全局變量的方式，做統一管理，方便未來這個顏色要改的時候，不需要到專案裡的每個地方一個一個改。

### 1.設定
到專案根目錄的`vue.config.js`

//路徑根據你專案的資料夾名稱
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "./src/assets/css/_variables";`
      }
    }
  }
};


### 2.注意
根據你的sass-loader的版本不同，路徑參數的key名稱也會有所不同

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

### 3.Nuxt的全局變量共享
主要是透過[style-resources-module](https://github.com/nuxt-community/style-resources-module)去做到
安裝與使用可以參考這篇[Nuxt 全域 SASS 變數](https://blog.judysocute.com/2020/06/13/nuxt-%E5%85%A8%E5%9F%9F-sass-%E8%AE%8A%E6%95%B8/)

## node-sass vs dart-sass
node-sass不會再有新功能，但是會永久性的維護下去
dart-sass則是目前推行的版本

可以參考這篇[Node Sass 棄用，以 Dart Sass 代替](https://www.gushiciku.cn/pl/pXB9/zh-tw)