Visual Studio CodeのEasy Sassを使って簡単にSassのコンパイルを行う方法

VisualStudioCodeのEasy Sassという拡張機能を使うと、Sassファイルの保存時に自動でコンパイルしてくれるようになります。

設定も非常に簡単なので「ただ単純にSassのコンパイルだけがしたい」場合にはもってこいです。

Easy Sassのインストール

Visual Studio CodeのMarketplace「Easy Sass – Visual Studio Marketplace」の「install」ボタンを押すか、エディタで「Easy Sass」で検索すると出てきます。

その後、エディタを再起動すれば使えるようになっています。

使い方

拡張機能の有効後に「.sass」「.scss」のファイルを保存すると、同じディレクトリ内にCSSファイルが出力されます。

［表示］→［出力］で「EasySass」を選択すると、出力先が見れたり、エラー文が見れます。

ただデフォルトの設定のままだと、「通常のCSSファイル」と「圧縮されたCSSファイル」の2つがコンパイルされたり、同じディレクトリ内に出力されてしまったりするので、その辺りを設定していきます。

設定

［設定］→［拡張機能］→［EasySass configuration］から設定の確認と変更ができます。