開発

Visual Studio CodeでSASSのコンパイルを標準で圧縮（minify）する方法

作成日： 2019年4月28日

Visual Studio CodeでSASSをCSSにコンパイルする際にはLive Sass Compilerを、minifyされた圧縮ファイル（.min.css）を作成するためには、Minifyを使用して、個別に処理していました。

これをSASSコンパイル時にそのまま圧縮ファイルを作成する方が楽だな、と思いましてLive Sass Compilerの設定を見直していましたら、設定で変更可能でした。

以下のようにsettings.jsonに追加するだけです。

Shell

"liveSassCompile.settings.formats":[
	{
		"format": "expanded",
		"extensionName": ".original.css",
		"savePath": null
	},
	{
		"format": "compressed",
		"extensionName": ".css",
		"savePath": null
	},
]

上記の設定で、style.scssをコンパイルすると、

標準のスタイルシートファイル: style.original.css
圧縮されたスタイルシートファイル: style.css

が作成されます。通常圧縮するとstyle.min.cssとなるのですが、これを書き換えています。

liveSassCompile.settings.formats : To setup Format (style), Extension Name & Save location for exported css [Multiple Format Supported].

ritwickdey/vscode-live-sass-compiler

ちなみにWordPressのテーマに必須のstyle.cssには必ず最初に以下のようなコメントの表記が必要ですが、

CSS

/*
Theme Name: テーマのタイトル
Author: 作成者名
Author URI: 作成者のURL（あれば）
Description: このテーマについての説明文
Version: バージョンを記入（1.0とか）
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

このまま圧縮すると、コメントも削除されてしまいますので、1行目の終わりに「!」を追加します。

CSS

/*!
Theme Name: テーマのタイトル
Author: 作成者名
Author URI: 作成者のURL（あれば）
Description: このテーマについての説明文
Version: バージョンを記入（1.0とか）
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/