mintcode

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


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

Sassで計算結果の単位に%をくっつける

最新記事