雖然安裝SCSS這件事拿出來寫一篇是有點無聊
但被他坑了一次，所以就想寫！！

要在Nuxt使用SCSS or SASS，要安裝node-sass和sass-loader這兩樣

npm i node-sass
npm i sass-loader@7.1.0

至於為什麼sass-loader要特別指定版本呢，因為我在起專案的時候裝，他預設現在會裝到8.0，裝起來是沒事，但當你要載入SCSS檔的時候他就會死給你看ＲＲＲＲＲＲ！！！我找了超久，想說是我哪裡沒設定好嗎？可是我看了官方也沒說要另外設定，別人的文章也沒有寫，node也有在8.9.0以上，最後去比對別人的專案，想說改裝成對方用的版本號，然後就真的，解決了...怒！！！！！！被版本坑！！！！！超怒！！！！

恩，有感覺到我為什麼想要寫這篇了嗎

原本我打算就這樣結束這篇

但還是多做個scss顏色變數這鬼東西好了好像也沒加什麼

SCSS

恩不管你用SASS還是SCSS都可以，差在有沒有分號、大括號，以及縮排表示階層。

預設在assets就有一支variables.scss
那這支我就會用來放一些共用的變數，主要就是介面的顏色，不然每次都要記一次色碼，真的是頗麻煩

定義變數的方法就是

$變數名字: 定值

我目前先吸了一些vscode的顏色，因為是用滴管工具吸的，文字的可能偏差比較多，總之就看喜歡什麼就弄上去吧～

$blackText: #111111;
$grayBg: #1e1e1e;
$grayTab: #2d2d2d;
$grayBgLight: #252526;
$grayBgLightHover: #2c2d2d;
$grayUi: #333333;

$textGray: #888888;
$textLightGray: #bbbbbb;

$chatInfo: #83cef0;
$chatComment: #5a9c4c;
$chatText: #7a7a7a;

使用方式就

color: $chatText;
background-color: $grayTab;
border: $grayBgLightHover;

當然變數設定不是只能設定色碼，像是數字什麼的，阿我名字都亂取的就不要計較叫做什麼了吧（我已經開始想要改叫做gray-100 200 300了，邊寫就發現越來越多灰色層級...名字都不知道要叫什麼了...Orz

當然SCSS還有很多其他好用的功能～但我沒有要講～～ya

要使用這隻檔案就在.vue裡引入囉～

<style lang="scss">
  @import 'assets/variables.scss';
  其他css...
</style>

變數在使用前一定要先定義好才可以用喔～就算是其他mixin extend都要定義在使用前喔！