無料お見積りブログ
BLOG
【2022年最新版】Visual Studio Codeで「@use」「@forward」をコンパイルする方法
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にコンパイルすることが出来ますので、是非とも使ってみてください！
愛知 県内から 名古屋 を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17 花車ビル南館5F
TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから
