ボタンの色やナビゲーションバー（ヘッダー）の背景画像の色など、多くのことを変更したいと思います。Boostrap-sass gem を使用しているため、Boostrap Web サイトの [カスタマイズ] ページを使用できません
ファイル custom.css.scss でこれらすべてを本当にオーバーライドする必要がありますか、またはこれらをより低レベルのどこかで変更できますか? プロジェクトファイルでそれを可能にする .css ファイルが見つかりません (すべての lib、app、および vendor /assets を検索しましたが、boostrap の css はどこにも見つかりませんでした。 gem ファイルに直接入れてください) 私は多くの変更を行っているので、多くのことを上書きすることは最善の選択肢ではないと感じています。
これを行う最善の方法は何ですか？ありがとう
私は Twitter Bootstrap の Sass フレーバーを使い始めました。コア ファイルをいじらずに独自のカスタム オーバーライドを作成し、読み込みを高速化するためにすべての CSS を 1 つのファイルに保持できるように、ファイルを構造化する賢明な方法を思いつきました。
簡単に言うと、すべての sass ファイルを assets/sass に置き、コア ファイル用にbootstrapというサブディレクトリを作成します。次に、カスタム scss ファイル用に、themeという名前の兄弟ディレクトリを作成します。
/bootstrapこのディレクトリに移動すると、その中bootstrap.scssに、すべてのコア コンポーネントを含むというファイルがあります。このファイルの名前を に変更theme.scssし、次のように親ディレクトリに配置します。
ご覧のとおり、既にいくつかのカスタム オーバーライド sass インクルード ファイルがテーマ ディレクトリにあります。これらは、コンパイル時にデフォルトのブートストラップ CSS の下部に追加されます。
theme.scssインクルード パスを so のように変更すると、魔法が起こります。オーバーライドについては画像の下の方を、カスタム変数の参照については上の方を見てください。
注:ブートストラップで変数を編集する場合は_variables.scss、ディレクトリに独自のファイルを作成し、それをファイルの先頭にtheme含めることをお勧めします。このようにして、将来の更新で保持されるブートストラップ変数をオーバーライドできます。theme.scss
次にtheme.css、ページに含めるだけで出来上がりです。これが私がやり始めた方法であり、まだバグに遭遇していません。
これは、私が見た方法の中で最も複雑ではないと思います。そして、新しい更新が来たら、コアのブートストラップ ファイルを更新し、編集内容を保持します。
Boostrap の元のファイルは決して変更しないでください。最良のオプションは、それらのクラスを独自のクラスでオーバーライドすることです。これを行うには、assets/stylesheets フォルダーに css ファイルを作成します。このファイルはアプリに自動的に含まれます。
