Railsと別で書いていたscssをRailsに入れようとしたら、SassC::SyntaxError in Users::Sessions#newが出た件について

目次

• はじめに
• 実行環境
• 理由
• 解決方法
• まとめ

はじめに

今回は別で書いていたscssをrailsに入れようとしたら
background-color: $color-basic;
のところで
Error: Undefined variable: "$color-basic".
というエラーが出た。

実行環境

この記事は以下の動作環境で動作確認しています。
* ruby (2.7.1)
* rails (6.0.3)

理由

*　application.scss(css)内のデフォルトでいる

 *= require_tree .

が、app/assets以下の全てのcssファイルを読み込んでいる
ので、
読み込む順番がずれて、
$colorを指定したmiximファイルが先に読み込まれていなかったから。
*が前に書いてあって、コメントアウトされている様に見えるけれど
ナ●シカの巨神兵の様に奴らは生きている...！！

---

解決方法

今回はstyle.scssに

style.scss

@import "./ホゲホゲ/mixin";
@import "./ホゲホゲ/plugin";
@import "./ホゲホゲ/reset";
（などなど続く）

の様な@importの集団を書いて、これを読み込ませたかったので、

１　application.scssに
(application.cssならscssに変更)

２　同ファイルの*= require_tree .の行を削除

３　末尾に↓の様に@importしてstyle.scss（などの@importがたくさん書いてあるファイル）を読み込む

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_self　//このファイルが最初に読み込むの意味。
 */
 @import "./css/style.scss";  // ここにimport(適用)したいscssを入れる。今回はstylesheet/cssフォルダ内にimportしたいscssを入れたのだけれど、ファイル構造や名前に合わせていただければ！

こんな感じで解決した。

まとめ

application.scss(css)の中身は
＊の後ろも生きているので注意が必要！