VS CodeでSCSS/SaSSコンパイル(CSSを書き出す)方法

2022年5月23日

前提

VS CodeでSCSS編集後、CSSをSCSSから書き出したい時のまとめ。

そもそもLive Sass Compilerはインストールされているか

まずは拡張機能をチェック。

ここをクリックする。

すでにインストール済みの場合

インストールされていない場合

インストールされていない場合は「インストール」をクリックしてインストールが終わったら念のためVS Codeを再起動。

Live Sass Compilerインストール後

SCSSファイルを開いたらこんな表示が出るはず。

「Watch Sass」と表示されている部分をクリック。

クリックしてこのような表示になったらSCSSを保存したと同時にCSSを書き出せます。