使用vscode自動編譯sass

由於我在工作中用的編輯器是 vscode ，所以記錄一下vscode 編譯sass 的配置

vs code 編譯saass

1.在擴展里搜索“easy sass”,直接進行安裝即可

 

 

 

2.安裝后默認已經做了配置，可以直接進行編譯。

　　eg:新建一個后綴為.scss文件

 

 

 

 修改保存后，自動生成了.css 和.min.css 兩個文件

 

 

 

 然而，很多情況下我們在開發當中，sass 和css文件是兩個不同的目錄。所以這就需要做些特殊的配置。

 

 

vscode 中 Easy Sass 的配置

 

1. 點擊Easy Sass 插件的“設置”按鈕，如下圖：

 

 

 

 

 

 

 

 

2. 選擇“配置擴展設置”選項，進入到設置頁面

3. 點擊“在setting.json中編輯”進入settings.json文件

 

 

 

 

 

 

 

 

 

 

 

 

 4. 根據需求進行配置即可

　　eg: 將sass目錄下的.sass文件編譯生成的文件放到css文件夾下，配置如下：

 

 

"easysass.formats": [ 
        //nested：嵌套縮進的 css 代碼。
        //expanded：沒有縮進的、擴展的css代碼。
        //compact：簡潔格式的 css 代碼。
        //compressed：壓縮后的 css 代碼

        {
            "format": "expanded",
            "extension": ".css" //設置編譯輸出的文件名
        },
        {
            "format": "compressed",
            "extension": ".min.css" //設置編譯輸出的文件名
        }
    ],
    "easysass.targetDir": "./css/" //提供 css 輸出路徑的設置（可以是絕對路徑或者相對路徑）

 

頁面中新建兩個文件夾scss 和 css

 

 

 

demo.css 保存編譯后，則將編譯后的文件放到了指定的目錄css文件夾下，如下圖：

 

 

 

 

在文件夾中就得到了相對應的編譯后的文件。

 

 

 

 

 

 

 

 編譯后：