Live Sass Compiler で複数の scss フォルダを watch する
VS Code の プラグイン Live Sass Compiler でSass をコンパイルするときに複数の scss フォルダを watch して、それぞれ別のフォルダに css を保存したいときがあります。 たとえば a-blog cms で複数のテーマを扱う案件。
- themes
- theme-name-a/scss/
- theme-name-a/css/dest/
- theme-name-b/scss/
- theme-name-b/css/dest/
というフォルダの構成で、それぞれのテーマの scss/ を css/dest/ に保存したい場合。
"liveSassCompile.settings.includeItems": [
"**/scss/*.scss" // scss という名前のフォルダ内の .scss ファイルすべて
],
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/dest" // ~/はscssファイルの場所を示す
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../css/dest" // ~/はscssファイルの場所を示す
}
],
上記のように書くことで、複数の scss という名前のフォルダ内の .scss ファイルをすべてウォッチして、scss ファイルから相対的な位置にある css フォルダにコンパイル結果を保存することができます。
参考:https://github.com/ritwickdey/vscode-live-sass-compiler/issues/26