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

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



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

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

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

"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].

ちなみにWordPressのテーマに必須のstyle.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行目の終わりに「!」を追加します。

/*!
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
*/
Wordpress テーマ作成時のstyle.cssコメント - Qiita
参考
Wordpress テーマ作成時のstyle.cssコメント - Qiita

Wordpressのテーマ作成時には、必ずstyle.cssが必要。 そして、テーマについての説明もstyle.cssに記入する(必須)。 最低でも以下くらいは書いておきたいメモ。 ```css:style.css /* Them...

Wordpress テーマ作成時のstyle.cssコメント - Qiita Qiita

今日はここまで

関連する記事



こちらはいかが?


コメントを残す