這也是我當初從眾多軟體中決定使用 VS Code 的主因，
在此簡述一下 Live Sass Compile Config 的優點以及設定
1. 自動偵錯
安裝之後，編寫SCSS Code的過程中，
Live Sass Compile Config 會自動檢查程式碼是否正確，
如果編譯正確，在畫面下方出現綠色的『success』
如果編譯錯誤，則出現紅色的『error』
2. 自動產出
Live Sass Compile Config 會自動將SCSS 轉譯為CSS，
3. Live Sass Compile Config 的設定檔位置與內容
轉譯後CSS的位置，輸出格式，在設定檔內可依據個人喜好做自定義的設定
設定檔位置：檔案 > 喜好設定 > 設定 > 使用者設定 > 延伸模組 > Live Sass Compile Config > 在Settings.json 內編輯
我的設定內容，你不一定要跟我設定的一樣
{
//autoprefix設定
//瀏覽器市佔比大於1%(>1%)自動加入前綴（Prefix）
//例如：-webkit- -moz- ...等
"liveSassCompile.settings.autoprefix": [
"> 1%",
"ie 10"
],
//css產出設定
"liveSassCompile.settings.formats": [
{
"format": "compact",//Valid values: "expanded", "compact", "compressed", "nested".
"extensionName": ".css",//例如上一行輸出為compressed，這行檔名產出為.min.css
"savePath": "/src/assets/css" //此為輸出的路徑，可以自行更改
},
{
"format": "compacted",
"extensionName": ".min.css",
"savePath": "/src/assets/css"
}
],
//不需要輸出的資料夾
//"liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
"liveSassCompile.settings.excludeList": ["**/bootstrap/**"],
"files.autoSave": "afterDelay",
"editor.minimap.enabled": true,
"editor.renderControlCharacters": false,
"breadcrumbs.enabled": true,
"git.ignoreLegacyWarning": true,
"window.zoomLevel": 0,
"files.trimTrailingWhitespace": true,
"editor.tabSize": 2,
"liveServer.settings.donotVerifyTags": true,
"explorer.confirmDragAndDrop": false,
"liveServer.settings.donotShowInfoMsg": true,
"workbench.colorTheme": "Visual Studio Dark"
}
另有更多完整設定
https://medium.com/@youngox9/%E7%B7%A8%E8%AD%AFsass-scss%E6%96%B9%E5%BC%8F-467007c1c337
沒有留言:
張貼留言