vscode怎麼編譯執行scss檔?
1、sass的編譯依賴Ruby 環境,所以先安裝ruby
2、裝好Ruby後再命令列輸入gem sass 來安裝Sass
3、在vscode 擴充功能中尋找easy sass插件,安裝
4、 接下來進行設定: 在vs code 選單列依序點擊“檔案首選項設定”,開啟settings.json 全域設定檔
"easysass.compileAfterSave": true, "easysass.formats": [ //nested:嵌套缩进的 css 代码。 //expanded:没有缩进的、扩展的css代码。 //compact:简洁格式的 css 代码。 //compressed:压缩后的 css 代码 { "format": "expanded", "extension": ".css" }, { "format": "compressed", "extension": ".min.css" } ], "easysass.targetDir": "css/" //路径
5、新建一個資料夾,在資料夾中新建兩個資料夾,一個sass一個css,如果你沒有建css資料夾,編譯以後也會自動建一個資料夾的
6、然後再sass下面建立demo.sass,然後寫
.box color: red .img width: 100%; display: block;
7、按下ctrl s,就直接編譯了,因為你之前設定的時候設定了easysass.compileAfterSave為true,所以儲存就會編譯一次,這也是為了提高開發效率
最後你會發現再css下面多了一個css文件,一個min.css文件,這是和你再設置了設置的有關係的,一個沒有縮進,一個壓縮的
相關推薦:vscode基礎教學
以上是vscode怎麼運作scss檔?的詳細內容。更多資訊請關注PHP中文網其他相關文章!