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で計算結果の単位に%をくっつける

最新記事

カテゴリー