Dart Sassの@useの使い方について

Question

Dart Sassについて教えてください。

index.html、info1.html
という2つのページがあり、それぞれに同名のcss（scss）を読み込んでいるとします。

info1.scssの内容はindex.scssの改変なので、info1.scssページ内に「@use "index";」
を記載して　index.scss　を継承させた上で改変部分のみを追記しました。
そこまでは問題なかったのですが、その後に
index.scssを修正して上書きすると、その修正内容がinfo1.cssにのみ適用され、index.cssには反映しません。
index.scssを修正してコンパイルすると両方のファイルが上書きされると思っていたのですが
結果としてはinfo1.cssのみが上書きされてしまい、indexには何も修正が適用されない状態です。

p { font-weight :bold;}

@use "index";
p { color :red;}

この状態だと　index　は太字、　info1　は太字+赤字で問題ありませんが

p { 
 font-weight :bold;
 background: green;
}

上記のように修正すると　index　は太字のままで、info1　のみが太字+赤字+緑背景　になります。
コンパイルしたcssは以下のようになります。

p {
  font-weight: bold;
}

p {
  font-weight: bold;
  background: green;
}
p {
  color: red;
}

info1.scssページ内の「@use "index";」を削除して修正するとindex.cssに修正が適用されます。

p {
  font-weight: bold;
  background: green;
}

この時点ではinfo1.cssは修正されていないので
その後にあらためて「@use "index";」を記載すると両方に修正が適用されました。

これはそもそもがSassまたは@useの仕様で、こうなって当然なのでしょうか？
それとも記載や考え方を間違えている可能性が高いでしょうか？

Sassを勉強しはじめたばかりでどこから疑うべきかの時点でつまずいています。
ご助言お願いします。

※追記
コンパイルはPreprosを利用しています。設定は保存先の設定しか変更していません。
コードはDreamweaverで記述しています。
また、コンパイル後のcssを追記しました。

Comments

[miyabi_pudding]

sassはどのようにコンパイルしていますか？

[warabiya]

コンパイルはPreprosを利用しています。設定は保存先の設定しか変更していません。
コードはDreamweaverで記述しています。
よろしくお願いします。

[miyabi_pudding]

その旨の情報はとても重要になりますので、
質問本文に環境を追記してください。
質問本文は編集が可能です。
また、Preprosの質問タグを追加した方がよいかと。
（Dreamweaverの質問タグも一応）

[miyabi_pudding]

あと、該当のコンパイル後のCSSも追記されるとよいかと
（意図した内容になってるものと、そうでないもの、両方）

[warabiya]

アドバイスありがとうございます。残念ながら「Prepros」のタグはないようでしたが、環境等追記しました。
また、回答もありがとうございます。これから試してみます。

Answer 1

※憶測になってしまいそうなので、先に言い訳しときます。
引き続き調査いたしますので、内容のアップデートはしていきます。

おそらくですが、Preprosないし、Prepros + Dreamweaver環境における、
ファイル保存時等のコンパイルの処理の仕方が関わっているように思います。
（改めて@useを記載して、意図したように動くなら、ファイル保存時に自動コンパイル、となっているはずですよね）

@useをしているファイルも、出力を行なっているから起きている現象の可能性もありますので、
下記対応をしてみてはいかがでしょうか？

• index.scssを保存した後、info1.scssも、改行した後、改行を戻して保存（要は両方保存し直す）
• p要素の共通スタイルはパーシャル記載（ファイル名接頭辞に_をつけたファイル）にし、両ファイルから@useするようにする

上記でもうまくいかなければ、Preprosにての、本現象という観点から調査してみるとよいかもしれません。

Comments

[warabiya]

回答ありがとうございます。ご提案いただいた方法を試してみました。

両方保存し直す…やはりinfo1にしか反映しませんでした
パーシャル記載…これであれば問題なく、修正と同時に両方に反映しました

また、環境の問題である可能性が高いとのことなので、試しにVscodeと拡張機能Live Sass Compiler（by Glenn Marks）をインストールして同じことをしてみたのですが、index.cssにのみ修正が反映されinfo1.cssには反映されないというある意味逆の状況になってしまいました。
※ただし、info1.sassを開いて保存しなおすと反映されます

解決方法はわかっていませんが、環境の問題であることは間違いなさそうです。
ひとまずパーシャル記載で進めていこうとは思っているのですが、
何かわかりましたら引き続きアドバイス等いただければ助かります。よろしくお願いします。

[miyabi_pudding]

ふむ…
コンパイル環境により挙動が変わるのは辛いですね…。
パーシャルで理想の挙動になったのならば、
それが一番いいような気がします。
ただ、本来ならば実書き出しファイルにも反映されるのがSassの仕様かとは思われますので、
各コンパイル環境も改善してほしいものですね…。
何かわかれば回答アップデートいたします。