目次
- はじめに
- 実行環境
- 理由
- 解決方法
- まとめ
はじめに
今回は別で書いていた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)の中身は
＊の後ろも生きているので注意が必要！