RailsでBootstrapのグリッドシステムのみを使用する
経緯
現在関わっているプロジェクト内で、以下のような要件があった。
1. フロント側レスポンシブの対応をBootstrapのグリッドシステムを使いたい。
2. 他のスタイルはBootstrapを使わずにCSSを独自で実装したい
RailsのアプリケーションにBootstrapを導入する手順は多く公開されているが、1.のグリッドシステムのみ導入が分からず、少し困ったので備忘録として残しておく。
環境
Rails 6.0.3.4Ruby 2.7.2
Rails6から、WebPakerを使ったJSの管理がデフォルトになったので、yarnでBootstrapを追加します。
$ yarn add bootstrap
Bootstrapすべてインポートする場合
# 省略
import "bootstrap/scss/bootstrap.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を確認すると以下のように、分割されたスタイルシートをインポートしているため、用途に合わせて、別途抜き出して使うこともできる。
/*!
* 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ファイルが生成されない仕様らしいです。
またインポートする際には_(アンダースコア)は省略できます。
Author And Source
この問題について(RailsでBootstrapのグリッドシステムのみを使用する), 我々は、より多くの情報をここで見つけました https://qiita.com/supercell1023koeda/items/93dd1951edcbbe3b92e9著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .