WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

Sassでファイルを読み込むときに使われる「@import」なのですが、2022年10月に「@import」が廃止される予定になっています。

その際に「@import」の代わりに「@use」「@forward」を使用するのですが、従来のVisual Studio Codeのプラグイン「Live Sass Compiler」では、「@use」「@forward」をSassからCSSにコンパイルすることが出来ません。

今回は、「@use」「@forward」が入っているSassをVisual Studio Codeで簡単にCSSにコンパイルする方法を解説します。

今までの「Live Sass Compiler」

今までVisual Studio CodeでSassをCSSにコンパイルするときに使われていた「Ritwick Dey」さんが作成したプラグイン「Live Sass Compiler」なのですが、更新が2018年7月11日で止まっていて、今回の「@use」「@forward」が対応される前に更新が終わってしまいました。

このプラグインはとても簡単にSassからCSSにコンパイルできるので非常に重宝していました。

これに代わるプラグインがないかと探したところ、あるプラグインを発見いたしました。

引き継がれた「Live Sass Compiler」

「@use」「@forward」が利用できるプラグインを探していたところ、あるプラグインを発見いたしました。

それは、「Glenn Marks」さんが作成したプラグイン「Live Sass Compiler」です。

このプラグインは、前にご紹介した「Ritwick Dey」さんが作成したプラグイン「Live Sass Compiler」を「Glenn Marks」さんが継承して今もなお更新が行われているプラグインになります。

まとめ

この「Glenn Marks」さんが作成したプラグイン「Live Sass Compiler」を有効化して、Visual Studio Codeの下部にある青色のバーに書かれている「Watch Sass」をクリックすると「@use」「@forward」でも、SassをCSSにコンパイルすることが出来ますので、是非とも使ってみてください！