T.N.K.Japan

【VSCode】Live Sass Compiler で@useがコンパイルできない！

2022年6月10日

cssの@importの廃止が近づき、やっと@useに移行しようと考えてる方も多いでしょう。ここではVSCodeの拡張機能で多くの人に使われているLive Sass Compilerを使ってコンパイルします。難しいことは他のサイトに任せて、まずはごく簡単な_test.scssというscssを作ってテストしてみましょう。

.hoge{
  .red{
    color: #F00;
  }
}

これをstyle.scssに@useで読み込んでみます。@useではパーシャルscssのファイル名の「_」と、拡張子を省略します。
なので、style.scssはこんな感じです。

@use 'test';

そして保存すると、自動的にjsonで設定しておいたフォルダにstyle.cssが書き出されている…はず。

「Success」も出てますよね。
確かにstyle.cssが出力されています。
早速、style.cssの内容をみてみましょう。

@use 'test';

え？ナニコレ？コンパイルされてない。こんなシンプルなscssが！？
Successって出てたのに、どうして…？
@importならコンパイルできていたのに。
調べたところ、そのPCに古いバージョンのLive Sass Compilerが入っていました。
ｖ3.0.0は@useをコンパイルできません。

現時点の最新はｖ5.4.0です。

これからLive Sass Compilerをインストールする方もご注意ください。検索で複数出てきます。