Railsで1枚のscssに共通で参照する変数を宣言し、複数のscssから参照する方法

Rails 5で試しました。RailsのAsset Pipelineの仕組みに乗っかって、1枚のscssファイルに変数宣言して、それを複数のscssから参照しようとしたら、ちょっとハマってしまったのでメモ書き。

• app/assets/stylesheets/application.scssを作る
• これはAsset Pipelineのデフォルトの設定で自動でロードされるはず

ここに、このようにロードしたいscssファイルを書く。

app/assets/stylesheets/application.scss

@import "./core";
@import "./user";
@import "./blog";

./のように相対パスで始めないと
"File to import not found or unreadable"
とかエラーになるので注意。

また後のimportで前のimportのスタイルをマージするので、その辺も考慮してファイル分割して、適切な順番でimportする必要がある。

次に変数の宣言をするファイルを作る。

variables.scss

$error_color: #ff0000;
$separator_color: #efefef;

これを各種scssファイルでimportする。

@import "./variables";

.error {
  color: $error_color;
}

.bordered-block {
  display: block;
  border: 1px solid $separator_color;
}

以下のようにimportしても変数は参照できない。

@import "./variables";
@import "./core";
@import "./user";
@import "./blog";

勘違いしがちなのは、core.scss -> user.scss -> blog.scssで、スタイルをマージできるので、後でimportしたscssは、前にimportされたscssの内容を参照できているように思ってしまうことだ。