SyntaxError variables.scss 変数代入するとエラーがでます。

Question

前提・実現したいこと

variables.scssでデザインのベースになるものを変数で置き換えたい。

試したこと

全角、半角、スペルミスの確認。
variables.scssのインポート

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

該当のソースコード

guest.scss

.request {
  width: 90%;
  margin: 0 auto;
  padding: 16px;
  background-color: #FFF;
  border-radius: 5px;
  &-title {
    color: $txt-head;
    font-weight: bolder;
    margin-bottom: 16px;
    &-p {
     font-size: small;
     margin-top: 0;
    }
  }
  &-detail {
    color: #000;
  }
}

variables.scss

// テキスト

$txt-head: #669999 !default;


// ボタン
$main-button: #669999;

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "variables";
@import "guest";
@import "user";

↑上記scssにはvariables以外の他のスタイルも追加されています。

補足

スペルミスもなく半角全角などの相違もなく、該当の「color: $txt-head;」の「＄」を削除するとエラーは回避できるのですが、読みこんでいるはずのvariables.scssに指定している色になりません…。
お気づきの点がありましたらどなたかご助言いただけますと幸いです。

Comments

[no1knows]

ご提示いただいたコードのファイル名を拡張子も含めて記載ください。

[ayako_sato]

すみません、ファイル名記載いたしました。

Answer 1

ここへんは参考にならないでしょうか？

Sassは標準設定ではファイル名冒頭に「」の付くファイルはコンパイルを行いません。
また、そうしたファイルも下記のようにインポートできます。
@import "variables"; // 「」抜きの名前でインポートできる

https://hacknote.jp/archives/5071/

Comments

[ayako_sato]

アドバイス・回答ありがとうございました。
これは、variables.scssの頭に「_」をつけてみる、ということだったんでしょうか…。試してみたのですが何も変わりませんでした。何度も読んでみたのですが理解が及ばずすみません…。

おそらくはvariables.scssが読み込めていないから、指定した変数（$txt-head）対して「こんなものはない」というエラーなのではないかというのは察しており…。
あとはどう読み込むのかというところで…何とか頑張って他の方法を探してみます…。ありがとうございました。

[ayako_sato]

自己解決いたしました…！

とてもとてもくだらないことで本当にお恥ずかしいのですが、variables.scssをインポートする場所を「application.scss」にしてしまっていたためうまく読めていませんでした。
guest.scssの行頭に記載したら読み込むことができました！
読み込まなければならなかったのは「guest.scss」でありました、大変お騒がせいたしました、お時間ありがとうございました。

Answer 2

とてもとてもくだらないことで本当にお恥ずかしいのですが、variables.scssをインポートする場所を「application.scss」にしてしまっていたためうまく読めていませんでした。
guest.scssの行頭に記載したら読み込むことができました！
読み込まなければならなかったのは「guest.scss」でありました、大変お騒がせいたしました、お時間ありがとうございました。

Answer 3

エラー原因

読み込ませるファイルを間違えていました。
application.scssにインポートしてしまい、variables.scssがうまく読み込めていないためのエラーでした。

解決方法

variables.scssはパーシャルファイル化(_variable.scss)し、独立した該当のsccsファイル（今回の場合はguest.scss）の行頭に@importで読み込ませたらうまく行きました。
初学者は共通ファイルをどこに置くか、どこで読み込ませるか迷うかもしれないのですが、

①variables.scssは「_」をつけてstylesheetフォルダへ保管
②@importは、変数を使っているscssファイルの行頭に記入
※今回の件でいうと、全てのscssファイルをインポートして管理しているapplication.scssではなく、サービス別に作っていた単独のguest.scssに記入する。

読み込みの流れとしては、application.scssにguest.scssをインポートして、guest.scssでパーシャル化したvariables.scssをインポートする、ということです。

参考サイト系がどうしても理解できず、いろいろやってみた結果の解決になるのでわかりやすいと思ったURLを貼れないのは申し訳ないです。

Comments

[ayako_sato]

とてもとてもくだらないことで本当にお恥ずかしいのですが、variables.scssをインポートする場所を「application.scss」にしてしまっていたためうまく読めていませんでした。
guest.scssの行頭に記載したら読み込むことができました！
読み込まなければならなかったのは「guest.scss」でありました、大変お騒がせいたしました、お時間ありがとうございました。