VSコードでEasy sassを使用している際のエラーについて

前提・実現したいこと

VSコードのEasy sassを使ってコーディングをしております。
styles.scssに@importを使って、scssファイルにコードを書いていますが、
エラーが出て、急にコンパイルができなくなりました。
特に設定はいじっておらず、少し前までスムーズにコンパイルができていたので、
原因が分からない状態です。

どなたかご教示いただけないでしょうか。
初心者のため、難しい用語は抜きで教えていただけると大変助かります。
どうぞよろしくお願いします。

発生している問題・エラーメッセージ

下に表示されているバーのEasy sassの出力のところに、下記のエラーメッセージがおります。


プロジェクト名/scss/_color.scss is excluded from building to CSS. Check easysass.excludeRegex setting.

該当のソースコード

width: 100%;など簡単なコードしか書いておらず、
コード自体にはおそらく不備はないと思うので、省略させて頂きます。

試したこと

・PC・VSコードの再起動
・styles.cssを確認（ここにscssで書いたコードが反映されません）

行動規範の内容に同意します

回答1件

ベストアンサー

それは「エラーメッセージ」ではなく、「パーシャルファイル(_で始まるファイル)については、個別のCSSを生成しないよ」という報告です。おそらく、あなたがeasysass.excludeRegexに^_+を設定した結果でしょう。

Easy Sassはパーシャルファイルを変更しても、それを読みこんでいるファイルを自動的にコンパイルしてくれないようです。_color.scssの内容を@importで読み込んでいるであろうstyles.scssを(変更後に)保存すると、styles.cssやstyles.min.cssが生成されます(あるいはエラーメッセージが出ます)。

実際にEasy Sassを入れて試してみたところ、「@import "_color";」と書かないと読み込まないのでエラーメッセージが出ましたね。パーシャルファイルの読み込みは、通常「@import "color";」と、アンダーバー(_)を除いて書くところなのですが。

投稿2020/08/19 14:16

Daregada

総合スコア11990

enamode_

2020/08/20 01:22

出ているメッセージの意味が理解できました。とてもわかりやすく教えて頂きありがとうございます。教えて頂いた、アンダーバーをつけても、パーシャルファイルに書いた内容は自動的にコンパイルされず、上記メッセージが出てしまいました。ただ、styles.scssの@importの行を1度コメントアウトして、再度コメントアウトを外すとコンパイルされる、というよく分からない状況ですが、まったく動かない状況からは回避できました。ありがとうございます！

Daregada

2020/08/20 01:29

今回試すためにEasy Sassを入れてみましたが、ちょっと使いにくいですね。私は「Live Sass Compiler」という拡張機能を使っています。VSCode右下のアイコンでSassを「Watching」(監視状態)にすると、保存時に自動的にコンパイルを行なってくれます。 Easy Sassと違って、@importされる側(今回だと_color.scss)を変更すると、@importする側(今回だとstyles.scss)も自動的にコンパイルされます。乗り換えてみては。

enamode_

2020/08/20 03:16 編集

ありがとうございます！「Live Sass Compiler」をさっそくインストールして試してみました。しかし、やはり@importの行をコメントアウトしてから再度コメントアウトを解除しないとコンパイルされず…。一度VSコードを終了してから、再度やり直しても同じ状況でした。きっと私のVSコードのどこかがおかしいのかと思います。丁寧に答えて頂いてありがとうございます。

Daregada

2020/08/20 03:17

Easy Sassをアンインストール(または無効)にしてください。もし、ほかにもSassをコンパイルするような拡張機能を入れているなら、すべてアンインストールか無効化します。その後、Live Sass Compilerを有効にし、VSCode右下の「Watch sass」をクリックして監視状態にします。

enamode_

2020/08/20 03:22

ありがとうございます。アンインストールをして試しましたが、やはり同じ状況でした(>_<)

Daregada

2020/08/20 03:27

もしかして、「何か文字を書くたびにコンパイルされる」と思ってます? Easy SassもLive Sass Compilerも、自動コンパイルを行なうのは、「文書が変更された後で保存される」タイミングです。

enamode_

2020/08/20 03:32

勉強不足で申し訳ありません。おっしゃる通り「何か文字を書くたびにコンパイルされる」と思っておりました。文字を書いた瞬間に、下の出力欄に自動的にメッセージが表示されるので、それが保存された状態だと思っていました。文書の保存には別途作業が必要なのでしょうか？

Daregada

2020/08/20 03:34

保存は普通にVSCodeでファイルを保存するボタンを押したり、キー操作を行なうだけです。