More than 3 years have passed since last update.

VSCodeでLive Sass Compilerが動作しないときの対処法

Last updated at 2021-03-11Posted at 2021-03-11

エラー内容と原因

この画面がVSCodeの右下に出てきて、Emmetも改行すらも効かなくなるということが発生しました。
各種プラグインの再インストール、VSCodeの再インストールを行った結果、Sass系のプラグインが原因でした。

・MacBook Air (2019)
・macOS Big Sur 11.2.1
・VSCode 最新版

ネットで調べていると、原因となりそうな事象が２つほどあるみたいです。

【原因】
1. Live Sass Compilerのバージョンが古い
2. HTMLHintというプラグインを導入している

このどちらかが原因の場合が多いみたいです。

【解決方法】
1.まずは自分が使っているLive Sass Compilerのバージョンを確認しましょう。

VSCodeのプラグインを検索したときに出るLive Sass Compilerのバージョンを3.0.0ではなく、4.X.Xをインストールしましょう。

2.HTMLHintをアンインストールしましょう

このプラグインがSass系のプラグインと相性が悪いことがあるみたいです。
もし4.X.Xをインストールしてもエラーが出るようなら、アンインストールしてみてください。

自分は4.X.Xをインストールしたら他のプラグインも問題なく動作し、エラーが解決しました。
ちなみに3.0.0は2018年あたりで更新が止まっているみたいで、最新のVSCodeではエラーが出ることが多いらしいです。

ほとんどこれで改善されると思いますが、万が一解決しない場合は、プラグインの再インストールとVSCodeの再インストールをしてみることもおすすめします。
そのやり方も参考URLに記載しておきます。