1

1つのプロジェクトの中で。あるlayoutだけbootstrapを適用したい。または、適用したくないと考えた時に、
(便宜上、適用したい方をA。したくないほうをBとします)。
application.scssの中で

@import "bootstrap-sprockets";
@import "bootstrap";

としてしまうと。ABどちらも適用されてしまいます。

html.bootstrap {
    @import "bootstrap-sprockets";
    @import "bootstrap";
}
<html class="bootstrap">...</html>

とするとBの要求は満たされますが。Aの方は、一部の定義が

html.bootstrap html ... {}

とコンパイルされるために、一部が正しく適用されなくなります(主にグリフアイコン系に問題が生じるようです)。

パッと思いつく限り

  1. assetsから切り離す。
  2. application.scssでrequire_treeなどの全体ロードを取りやめる。レイアウト毎に@importを列挙したscssを用意して、そのファイルを呼び出す。

のどちらかだと思うのですが。どちらが好ましいのか判断がつけにくいので困っています。
あるいは……他に検討すべき方法は、ありますか?

1 件の回答 1

1

require_treeは、確かにファイルを置くだけで簡単なのですが。
リセット系のCSSなどが顕著ですが取り込み順序の意識が出る時点で破綻しやすいものです。
よって、今回の事例とは違いますがSCSSの取込み方で問題が生じた場合は、1つ1つ@importするのが好ましいです。

方法1:レイアウト毎のscssで、1つ1つ@importする

今まで作ってきたscssファイルは、全て/assets/stylesheets/<なんとか>/*.scssへ移動します。そして、/assets/stylesheets/<識別子>.scssを、用意します。識別子はレイアウトファイル名など命名規則が作れるほうが良いでしょう。
<識別子>.scssの中には、@import '<なんとか>/*'; を羅列していきます。
こうすることで取り込み順序を自由に決定することもできます。

方法2:レイアウト毎のディレクトリで管理する

/assets/stylesheets/<識別子>/application.scssを用意して。同階層以下に必要なscssを設置します。この場合はrequire_treeしても構いません。
この方法の場合「レイアウト共通のもの」の管理が煩雑になりますが。例えばユーザー画面と管理画面が混在していて、それぞれレイアウトも違えば開発者も違う。ましてや既存データを手間なく取り込みたいという形であれば検討しても良いでしょう。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。