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

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

物草 灸太郎

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

⬅ 前の記事
電動ハンマーとスクレッパーで電動斧が出来ます。
次の記事 ➡
BootstrapのPopoverにテーマカラーを反映させるSASS設定

関連投稿

コメントをどうぞ

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