Sassでカラーコードを変数として定義し、別ファイルにて都度、呼び出したい。

_variable.scssファイルにカラーコードを格納した変数をまとめて管理しやすくしたいのですが、
呼び出しの記述が間違っているのか上手く呼び出しが実行されません。
以下は試したコードなのですが、記述内容はどこがまちがっているのでしょうか？

試したこと：
・@import "variables";から
@import "_variables.scss";で省略なしで実行。
・スペル間違いは無し
・呼び出し先のファイルに直接変数を定義し、呼び出して実行は問題ありませんでした。

「_header.scss」

scss
1@import "variables";
2// $color-main: #FFFFFF;
3// $color-title: #333333;
4// $color-tool: #3F51B5;
5.page-header {
6    .container {
7        display: flex;
8        justify-content: space-between;
9        position: fixed;
10        width: 100%;
11        height: 100px;
12        padding: 0 140px;
13//こちらのバックグラウンド色を変数を呼び出して変更したい。
14        background: $color-title;
15    }

「_variable.scss」

scss
1// ベース色
2$color-main:#FFFFFF;
3$color-title:#333333;
4$co: red;

よろしくお願いいたします。

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

回答2件

タイポですね。
ファイル名がvariableなのに呼び出しがvariablesでsがついてます。
↑と思いましたがteratail上のみのタイポですかね？

コードは正しいので動くはずです。私の環境では動きました。
以下ではどうでしょう？

@import "./variables";

上記でも動かないならコンパイル環境、ディレクトリ構成がおかしいのではないのでしょうか？
コンパイルして_header.scssから_header.cssが出力されているようならコード以前に環境による問題があるかと思われます。

投稿2020/03/09 11:21

編集2020/03/09 11:43

tsuka_rinorino

総合スコア229

manakana

2020/03/10 05:23

回答ありがとうございます。ご指摘の件ですがタイポではなかったようです。「_header.scss」から「_header.css」も出力されているので、問題が確認できませんでした。ですので提示していただいたコンパイル環境、ディレクトリ構成から当たってみようと思います。

tsuka_rinorino

2020/03/11 02:39 編集

環境としては以下のようにすべきだと思います。アンダーバー付きは出力するべきではないファイルなので対象外にします。そうでないと@import先次第でエラーになるからです。（以下のようなパターン) // style.scss @import "variables"; @import "header"; // header内でvariablesをimportせず変数を利用している場合エラーが出ていた場合、エラーより先のコードが出力されないという可能性があります。

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

自己解決

参考記事
どうやらwindows環境特有のバグのようですね。
試しにwin10環境を2台で確認しましたが、どちらも画像の通りとなってしまいました。
macbookで検証もしましたがこちらは問題なく実行できました。
コンパイル用のプラグイン（easy sass）を無効にして
「live sass compiler」で試したところ正常にコンパイルできました。
正直「_」ありなしに拘らなければeasy sassでもよいかと
回答を下さった皆様ありがとうございました。