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

作成日:

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
*/
favicon
Wordpress テーマ作成時のstyle.cssコメント - Qiita https://qiita.com/sararilfy/items/4784508f2bba09d93bb4

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

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。