Zenn
🔩

Sass や CSS の縮小をしたいけど gulp や webpack で挫折しそうなときに使う VSCode 拡張機能

2021/07/05に公開
CSS
JavaScript
Sass
Scss
VS Code
tech

ある程度コーディングを勉強すると CSS 設計や Sass を使いたいときが来るかと思います。
また、サイトページの高速化に対する追求心から CSS ファイルや JS ファイルの縮小にも興味が出てくることもあるかと思います。

Sass や CSS・JS ファイルの縮小は一般的に gulp や webpack でやることが多い印象。

ただ、現場でそういった実装をしていなければいきなりコマンドラインを使って npm とか触って、、、っていうのはハードルが高い。
普段エラーの起こらない HTML コーディングしている人間にとってエラーが起こるだけでもまあまあパニックになりやすいです。
そしてなにより、本来の目的である Sass の利用や CSS ファイル・JS ファイルの縮小が、gulp や webpack の学習でつまづいてしまうのはとてももったいない。

そこで、今回は webpack や gulp を導入するにはハードルが高いけど、とにかく Sass を使いたい、CSS ファイルや JS ファイルを縮小化してサイトのスピードを上げたい人のための VSCode の拡張機能についてまとめました。

CSS ファイル・JS ファイルの縮小化を拡張機能で完結させる方法

JS & CSS Minifier (Minify)をインストール

CSS や JavaScript は、拡張機能でもさくっと縮小化できます。

今回紹介する方法は、JS & CSS Minifier (Minify)を利用します。

インストールして再起動すればすぐに使えます。

CSS ファイル・JS ファイルを縮小する

手順としては3ステップでカンタンにできます。

  1. workspace を開く
  2. 左下の Minify を押すと自動で min.css が作成される
  3. リンクを min.css に切り替える

ワークスペースで編集したいフォルダを開いたら、左下にMinifyというボタンが登場します。（逆にワークスペースを開かないと縮小化してくれるMinifyのボタンが登場しないので要注意。）

これをクリックすると、以下のようにmin.cssファイルが生成されるようになります。

Sass のコーディングを拡張機能で完結させる方法

DartJS Sass Compiler and Sass Watcher をインストール

まず、DartJS Sass Compiler and Sass Watcher をインストールします。

インストールして再起動すればすぐに使えます。

Sass→CSS のコンパイル

そのままでもコンパイルはできますが、VSCodeの設定でsetting.jsonを編集してコンパイル環境を整えるのがおすすめです。

以下のように setting.json を編集すると asset/css ディレクトリのなかに style.css と style.min.css がコンパイルされます。

.vscode/setting.json
{
  "dartsass.targetDirectory": "asset/css"
}
Lib Sass版（非推奨）

Live Sass Compile をインストール

Sass から CSS への出力や Sass をもとに CSS ファイルを縮小化させるのでも、拡張機能でできます。

今回紹介する方法は、Live Sass Compile を使う方法。

インストールして再起動すればすぐに使えます。

Sass→CSS のコンパイル

手順としては単純で、ワークスペースを開いて Sass のコーディングをする際に Sass watch を選択するだけ。

先程と同じく、ワークスペースに対象のScssファイルがあるフォルダを開きます。

上の画像にもありますが、VSCodeの下部分にWatch Sassがあり、このWatch Sassを選択すると、Sassのコンパイルがされるようになります。

watching...という表示が出ている間はコンパイルされます。

とはいえ、初期設定のままだと Sass のファイル群のなかに style.css が混ざってしまいます。
また、CSS も素の CSS でわざわざ先程の拡張機能を使って minify をするのも面倒です。

ので、コンパイル先を変更させたい場合や CSS の縮小化したい場合は「設定」から setting.json を編集します。

以下のように setting.json を編集すると asset/css ディレクトリのなかに style.css と style.min.css がコンパイルされます。

setting.json
"liveSassCompile.settings.formats": [
	// style.css
	{
		"format": "expanded",
		"extensionName": ".css",
		"savePath": "/asset/css/"
	},

	// style.min.css
	{
		"format": "compressed",
		"extensionName": ".min.css",
		"savePath": "/asset/css/"
	}
]

この設定を反映させると、以下のようにファイルが構成されるのでとても便利。

もちろん、Scssファイルを移動してもコンパイルされる場所は変わりません。
私はよくCSSと同じassetフォルダ内にscssフォルダをつくって、その中にScssファイルを使っています。

▼こんな感じ

ディレクトリを変更したい際は、「"savePath": "/asset/css/"」の部分を編集すれば反映されます。

例）「"savePath": "/asset/css/"」を「"savePath": "/css/"」に変更すると、css ファイル内に style.css がコンパイルされる。

最後に

本来は gulp や webpack を使うのが最適なのはわかっています。
ただ、実際周りにそういった知見の無い人に囲まれていきなり導入するにはなかなかハードルが高いもの。

まずは、VSCode の拡張機能や便利なツールに頼ってみるのもおすすめです。
で、慣れてきたら webpack や gulp の導入方法についても勉強してみて、徐々にモダンな開発ができるようにしていけばいいんじゃないかなと思います。

それでは。

Discussion