【2022年最新版】Visual Studio Codeで「@use」「@forward」をコンパイルする方法

BLOG
ブログ

公開日:2022.9.6

良かったらハートを押してね！

ホームページ制作

作業

CSS

コーディング

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
引き継がれたLive Sass Compiler
まとめ

１．今までの「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にコンパイルすることが出来ますので、是非とも使ってみてください！

【Word Press】single.phpをカテゴリ・ターム毎に分岐

【jquery.cookie.js】初回だけポップアップ（モーダル）を簡単に作る方法

Word Press カテゴリやタグの様々な呼び出し方

愛知県内から名古屋を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから

良かったらハートを押してね！

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

CONTACT

オンラインでのお打ち合わせも可能

ホームページを作りたい	ホームページを作った後	こんなことも
新しく作りたい	更新代行してほしい	写真撮影をしてほしい	多言語対応したい
スマホ対応したい	保守管理してほしい	動画をつくりたい	ライティングをしてほしい
リニューアルしたい	SEO対策をしたい	印刷物をつくりたい	イラストを描いてほしい
プチリニューアルしたい	WEB広告を出したい	ロゴをつくりたい	自社で簡単に更新したい
採用に特化したい			HP制作・運営サポートサービス
全部任せたい			採用特設HP「ウェブサイ」