sassでコンパイル（読み込み）が自動で反映されない。

Question

sassで記述すると
ファイル分けして、ヘッダー部分のコードは
例えば、_header.scssにコードを書きます。
そして、style.scssに@import"module/header";として記述するとstyle.cssにコンパイルされるかと存じます。
しかし、毎回自動読み込みならず、watching sassをクリックしてもstyle.cssに反映せず、
@import"module/header";の部分を毎度書き直すと反映します。
そうゆうものでしょうか？>< live server （ブラウザで変更を瞬時に見れる拡張機能）で変更を確認しつつコードを
書いているので、毎回@importの部分を書き直すのが手間で>< sassのメリットを感じれません。。

ちなみにlive sass compiler の拡張機能を使っています。

どなたかご存知でしたら教えていただきたいですm(_ _)m

Answer 1

僕も同じ状態に陥りました！
僕の場合、sassをいじってるワークスペースの他に、もう一つワークスペースが開いており、それを閉じたら反映されるようにました！

Comments

[remitantan]

komatsundoさん
なるほど！有益な情報ありがとうございます！今度試してみます^^

Answer 2

VSCodeのLive Server拡張機能は、(ローカルサーバーを起動した状態で)監視対象のHTMLファイルやそこで使われるCSSファイルが保存されると、それらに基づくページをブラウザーで自動的に更新して表示します。

Live Sass Compiler拡張機能は、「Watching Sass」をクリックして有効にした段階で、一度監視対象のSCSSファイルをCSSファイルにコンパイルし、その後はSCSSファイルが保存されたときに、自動的にそれをコンパイルしてCSSファイルを更新します。

いずれもファイルの保存がトリガーになっているので、「Watching Sass」をクリックするのはVSCodeを起動後に一回だけでよく、その後はSCSSファイルを書き換えて保存するだけでブラウザーの表示が更新されます。保存するのが面倒なら、VSCodeの自動保存機能を使ってください。

Comments

[remitantan]

そうゆう仕組みなのですね！
VSCodeの自動保存機能は使っているのですが、どうも即時反映されないです。。
設定の問題なのか何なのかもうちょっと調べてみます！
回答いただきありがとうございました！^^