1、在拓展商店裡搜尋“easy sass”，並安裝，安裝成功後點重新載入。

第一個Easy Sass是Sass編譯css的外掛,本文重點

第二個是Sass是語法高亮外掛,可以一起安裝了

2、接下來進行配置： 在 vs code 選單欄依次點選“檔案 首選項 設定”，開啟 settings.json 全域性配置檔案。搜尋“easysass”，然後把 easysass 相關的設定項複製到右側的使用者設定編輯視窗中，再根據實際情況修改配置項。

一般開發環境中用到其中兩個設定項（上圖紅框處中的程式碼）：

easysass.formats[i].format 支援四個選項用以編譯生成對應風格的 CSS： 　　

nested：巢狀縮排的 css 程式碼。 　　

expanded：沒有縮排的、擴充套件的css程式碼。 　　

compact：簡潔格式的 css 程式碼。 　　

compressed：壓縮後的 css 程式碼。

easysass.formats[i].extension 顧名思義就是設定編譯輸出的檔名了，此處可以自定義檔名，輸出的 CSS 檔名會按照“當前 Sass 檔名（不含拓展名）+此處自定義檔名”的格式來生成。 例如：設定 easysass.formats[i].extension 為 ".min.css"，假設當前的 Sass 檔名為“style.scss”，則編譯輸出的 CSS 檔名為“style.min.css”。

3、我們的生產環境中，在很多情況下 Sass 檔案和 CSS 檔案是不在同一個目錄下的，而Easy Sass 預設輸出的 CSS 是和當前 Sass 檔案處於相同目錄的，為此我們需要配置輸出路徑。

easysass.targetDir 提供 CSS 輸出路徑的設定，值可以是絕對路徑或相對路徑。例如：設定 easysass.targetDir 為 "./css/"，此時儲存修改完畢的 Sass 檔案，
VSCode 會自動編譯並在當前 Sass 檔案的上級資料夾 css 目錄下輸出生成 CSS 檔案（見下圖）。

如果不行沒有即時編譯重啟下vscode,一般來說不用的.如果重啟還不行注意配置是否出錯了.

文章來源:傳送門(有刪改)