VSCodeでcssがうまく反映されない

Question

前提・実現したいこと

parts.scssを保存したらstyle.cssに反映したい

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

scssについて、
style.scssで各パーツを呼び出ししているかたちをとっているのですが、
子cssの（page.scssなど）変更をしたあと、style.scssも保存しないとstyle.cssに反映されません。

sass
-style.scss
-parts
--page.scss

style.scssはこのようなかたちで書き出しています。
@import "parts/page";

試したこと

いろいろ記事をあさりましたが、解決方法が分かりませんでした

補足情報（FW/ツールのバージョンなど）

VSCodeを使用しています。

Answer 1

ええと、VSCodeに入れるSass拡張機能しだいです。たとえば、「Live Sass Compiler」であれば、ご希望通りの動作が実現できますよ。

Live Sass Compilerをインストール後に、ステータスバー(最下行)に表示される「Watch Sass」をクリックすると、VSCodeで開いているフォルダー(以下のSassファイル)の変更を常時監視し、変更があればコンパイルし、その影響を受けるSassファイルも合わせてコンパイルします。

今回の例で言えば、page.scssだけを保存すれば、style.scssを保存し直さなくても自動的にコンパイルしてくれます。

なお、@importして使うだけのファイル(今回だとpage.scssのほう)は、先頭に下線記号「_」を入れておけば、そのファイル自体のCSSファイルは作成されません。

Comments

[yyy-2019]

コメントありがとうございます！
Live sass comilerの機能、watch sassは使用している状態なのですが、
style.cssに反映されなくて悩んでおりました。
本来は一度の保存で両方更新されるものなのですね。
sassの階層が別れているためでしょうか、、？

[Daregada]

1. HTMLファイルを置いた**フォルダー**をVSCodeで開く(重要)。「ファイルを開く」ではなく、「フォルダーを開く」を使います。
2. そのフォルダーにsassフォルダーを作成し、その中にstyle.scssを置く。
3. sassフォルダーにpartsフォルダーを作成し、その中に_page.scssを置く。
4. style.scssに「@import "parts/page";」と書く。
5. 「Watch Sass」をクリックしてLive Sass Compilerを有効にする。この時点で一度コンパイルが行なわれます。
6. _page.scssを変更して上書き保存する。自動的にstyle.scssのコンパイルも行なわれる。
7. 生成されたCSSファイルの内容を見て、変更が反映されているのを確認する。

[yyy-2019]

返事遅れてしまい大変申し訳ありません。
確かに、VScode上でフォルダを開くことはしていませんでした！
試してみます。
ありがとうございます。

[yyy-2019]

今、試してみましたが、この方法でできました！
根本的にやり方を間違えていたようですね。。
大変助かりました！ありがとうございます！！

Answer 2

@importを使って読み込む際はそのようにしないと当然反映されません。
scssから出力されたcssの実際のコードを確認すればわかると思います。

Comments

[yyy-2019]

そうなのですね。昨日からsassに挑戦し始めたもので、分からないことが多く・・・ありがとうございます。
page.scssを保存してstyle.cssに反映するためには、何か設定が必要ということでしょうか？

[cerfweb]

今そうされているように、page.scssを保存してからstyle.scssも保存し直すより方法がないかと思います。
もしimportして変数を引き継いだりする必要がないのであればhtmlのhead部分に別々にリンクを書けばいいことですが。

[yyy-2019]

そうなのですね、では、このまま都度必要なファイルを保存しつつやっていこうと思います。
調べるのに結構時間をかけてしまっていたので大変助かりました。ありがとうございます。