Vue

Sass 安裝

方法一

npm 安裝

建立編譯環境

1
npm install -g sass

sass –version版本號

1
sass --version

參考資料
sass 安裝

# 新增styles.scss 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$primary: #30c39e;
%transition{
 transition: all .3s ease;
}

.btn {
  background: $primary;
  @extend %transition;
  &:hover {
    background: darken($primary, 5%);
  }
  &:active {
    background: darken($primary, 10%);
  }
}

進入在你的scss檔案的資料夾，並執行sass watch監控sass 輸出 css 
1
2
3
4
//window
sass --watch rwdScss:rwdCss 
或
sass scss\styles.scss css\styles.css

方法二

vs-code 安裝套件：Live Sass Compiler

指定輸出CSS的路徑：

喜好設定->設定打開Setting .json

設置參數放工作區設定的大括弧內

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//css產出設定
   "liveSassCompile.settings.formats": [
       {
           "format": "expanded",
           "extensionName": ".css",//
           "savePath": "/css"///輸出的路徑
       },
{
          "extensionName": ".min.css", //正式版副檔名為min.css
          "format": "compressed", //壓縮成一行css，正式版本
          "savePath": "/dist/style"
        }
   ],

建立一個資料夾:

內有scss/style.scss

視窗下方藍色區域是否出現了一個小小的按鈕寫著Watch Sass，按下執行

畫面會新增 style.css.map
畫面會新增 style.css