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の内容を参照できているように思ってしまうことだ。