もう、Bootstrap4の時代なのだろうが、まだBootstrap3を使っている。
DrupalのBootstrapサブテーマで、SASSを使って動かしていたプロダクションサイトでDrupal側のテーマをbootstrap 8.x-3.19に上げたテストをしたら動かなくなったので、テーマを上げずに使い続けているサイトがある。割とえいやっと動かしていたので、あらためてどう動いているかを確認しながら、準備を整えたので記録しておく。
8.x-3.19では、サブテーマ作成用のstarterkitが整理されてきれいになった。8.x-3.17では、themeのstarterkitsのディレクトリの下に、cdn、less、sassのサブディレクトリがある。SASSを使う場合は、このsassのディレクトリを使って、サブテーマを作る。8.x-3.19ではTHEMENAMEという唯一のサブディレクトリがあって、そこからサブテーマを作る(https://www.drupal.org/node/3049485)。
その後の手順は、サブテーマの手順が別ドキュメントに書かれている(https://drupal-bootstrap.org/api/bootstrap/docs!Sub-Theming.md/group/sub_theming/8.x-3.x)。LESSであれSASSであれ結局は、css/style.cssを生成すれば良いわけだから、確かに方式毎にサブテーマ作成用のstarterkitが必要なわけではない。後は、ドキュメントの手順に従って、作業を進めれば問題なくできる。
私が試した環境で引っかかったのは、sassのコマンドラインで、
sass style.scss:../css/style.css -E "UTF-8"
のUTF-8の指定が必要なところ位だった。
構成定義で本当の意味で手を入れる必要があるのは、scss/style.scssファイルのみだ。
オリジナルは以下の通り。
// Default variables.
@import "default-variables";// Bootstrap Framework.
@import '../bootstrap/assets/stylesheets/bootstrap';// Base-theme overrides.
@import 'drupal-bootstrap';
今回変更した結果は以下の通り。
// Default variables.
@import "default-variables";
$font-size-base: 14px;
$font-size-h1: floor(($font-size-base * 1.8)) !default;
$font-size-h2: floor(($font-size-base * 1.6)) !default;
$font-size-h3: ceil(($font-size-base * 1.4)) !default;
$font-size-h4: ceil(($font-size-base * 1.2)) !default;
$font-size-h5: $font-size-base !default;
$font-size-h6: ceil(($font-size-base * 0.85)) !default;
$blockquote-font-size: ($font-size-base * 0.95) !default;// Bootstrap Framework.
@import '../bootstrap/assets/stylesheets/bootstrap';// Base-theme overrides.
@import 'drupal-bootstrap';
日本語だと、見出しが大きすぎるのと囲み記事のフォントが大きすぎるので調整した。8行だけだ。
最終的に生成されるstyle.cssでは、フォントサイズは以下のようになる。
h1, .h1 {
font-size: 25px; }h2, .h2 {
font-size: 22px; }h3, .h3 {
font-size: 20px; }h4, .h4 {
font-size: 17px; }h5, .h5 {
font-size: 14px; }h6, .h6 {
font-size: 12px; }
だから、これをstyle.scssの一番後ろに書いてやっても見出しの大きさは同じになる。定義の上書きをやる場合は、それを定義して使っているBootstrap Framework.より前にやらないといけないし、生成後の上書きなら後ろに書く事になる。もちろん前に書いた方が美しいし、$font-size-baseのような良く引用されている変数の場合、生成後どうなるかは容易には想像できない。
色々触って見て分かったのは、直したいと思ったものが実際にはどのようなcssになっているかをチェックし、それを作成しているscssの定義を調べ、それがどのように計算されているかを理解する必要があるという事だ。経験を積めば、すぐこの症状なら、ここをいじれば良いはずという勘が働くようになるのだろうが、一人でやっていて調べていると効率が悪すぎる。
自社のチームあるいは、適当なコミュニティへのアクセスの有無が生産性に大きく影響するのが良く分かる。