RailsでBootstrapのグリッドシステムのみを使用する

経緯

現在関わっているプロジェクト内で、以下のような要件があった。

1. フロント側レスポンシブの対応をBootstrapのグリッドシステムを使いたい。
2. 他のスタイルはBootstrapを使わずにCSSを独自で実装したい

RailsのアプリケーションにBootstrapを導入する手順は多く公開されているが、1.のグリッドシステムのみ導入が分からず、少し困ったので備忘録として残しておく。

環境

• Rails 6.0.3.4
• Ruby 2.7.2

Rails6から、WebPakerを使ったJSの管理がデフォルトになったので、yarnでBootstrapを追加します。

$ yarn add bootstrap

Bootstrapすべてインポートする場合

app/assets/stylesheets/application.scss

# 省略
import "bootstrap/scss/bootstrap.scss"

グリッドシステムのみを抜き出したい場合

app/assets/stylesheets/application.scss

# 省略
import "bootstrap/scss/bootstrap-grid.scss";

node_modules配下を確認するとの以下のパスにbootstrap-grid.scssが配置されている

$ ll node_modules/bootstrap/scss/

省略

-rw-r--r--   1 koeda  staff    409 12  2 20:29 bootstrap-grid.scss
-rw-r--r--   1 koeda  staff    918 12  2 20:29 bootstrap.scss

またbootstrap.scssを確認すると以下のように、分割されたスタイルシートをインポートしているため、用途に合わせて、別途抜き出して使うこともできる。

node_modules/bootstrap/scss/bootstrap.scss

/*!
 * Bootstrap v4.5.3 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

余談

node_modules/bootstrap/scss/bootstrap.scssを確認すると_alert.scssや_reboot.scssなど、接頭語が_(アンダースコア)で始まるファイル名となっている。
これは、scssファイルをコンパイルしてもcssファイルが生成されない仕様らしいです。
またインポートする際には_(アンダースコア)は省略できます。