Bootstrapのブレイクポイント変更について

Question

分からないこと

Bootstrapを構成しているcssファイルの中で、bootstrap.css以外のcssファイルのブレイクポイントも変更しなければいけないのでしょうか。

それに際して、bootstrapを構成するファイルの役割、そもそもbootstrap自体の機能についても軽く教えていただけると嬉しいです。

（※当方CSSについては勉強し始めたばかりで、レスポンシブデザインを使うに際してBootstrapを知ったばかりなので見当違いなことを言っているかもしれませんが、優しく教えていただけると幸いです。）

ここまでの経緯

まずBootstrapを導入することにしたのですが、ブレイクポイントを変更したかったので、いくつかのサイトを参考にして、Bootstrap4のsassファイルをダウンロードして_variables.scssのブレイクポイントを変更、bootstrap.scssをbootstrap.cssに変換しました。

参考にしたサイト

その後Bootstrap4のコンパイル済みファイルをダウンロードして、css/bootstrap.cssと先ほどコンパイルしたファイルを置き換えました。

確かにbootstrap.cssのブレイクポイントは正常に変更されていますが、他のcssファイル（例えばbootstrap-grid.css）の中身を見ると、当たり前ですが変更前のブレイクポイントが記述されています。

bootstrap.css以外は関係ないのでこのままでいいのですか？
それとも他のファイルとbootstrap.cssのブレイクポイントが異なっていることによる問題があるので、他のcssファイルのブレイクポイントも手動で変更する必要があるのでしょうか。

初歩的な質問で申し訳ないです。よろしくお願いします。

Answer 1

はじめまして

はじめに確認させてください

ご提示の記事が言っている「ブレイクポイントの変更」というのは、

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

を

$grid-breakpoints: (
  xs: 0,
  sm: 200px,
  md: 400px,
  lg: 600px,
  xl: 1200px
) !default;

というように値のみ変更するということですが、

当たり前ですが変更前のブレイクポイントが記述されています

から察するに、新たに$grid-breakpoints2のような変数を定義してブレイクポイントを変更しているのではないかと思ったのですがいかがでしょうか？

Bootstrapは_variables.scssに全ての変数が収まっているため、ブレイクポイントをはじめ色やサイズなどもここを編集すれば全てのコンポーネントのスタイルが変わるようになっています

そのため、変更前のブレイクポイントが記述されている状況にはならないかなと思います

見当違いでしたらすみません

Comments

[makkuro]

ご回答ありがとうございます。

＞当たり前ですが変更前のブレイクポイントが記述されています
というのは、bootstrap.cssしかコンパイルしたファイルと置き換えていないので、ダウンロードしたままのbootstrap-grid.cssには標準のブレイクポイントがそのまま記述されているという意味です。書き足らず申し訳ないです。

_variables.scssに全ての変数が収まっているということは、bootstrap.css以外のbootstrap-grid.cssなどのcssファイルについても、sassファイルからコンパイルして置き換えたほうがいいということでしょうか？

[simochee]

ありがとうございます。現状把握しました

`_variables.scss`に全ての変数が収まっているので、変更後のSCSSをコンパイルするとその変更が反映されたCSSファイルが出力されます

そのため、コンパイル後はどこで変数が使われているかわからないので全てのCSSを置き換えたほうがいいかなと思います

もし、既存のCSSに手を加えているようでしたら、コンパイル前のものに同様の修正を記述してからコンパイルたら幸せかもしれません

[makkuro]

ご回答ありがとうございます。
よく分かりました。CSSを全てコンパイルして置き換えようと思います。
分かりづらい質問にご丁寧にお答えいただきありがとうございました。
また機会があればよろしくお願いいたします。