【3分でできる】Railsでbootstrapの導入方法

はじめに

bootstrapの導入をします！
簡単に解説します！
bootstrapとは、
Twitter社が開発したCSSの「フレームワーク」です。
便利にデザインが整うやつです。

このbootstrapで理解しないといけないことがあります。
それは、
「グリッドシステム」です

サイトの横幅を均等に分けるガイドラインの事です。
Bootstrapは12本のグリッドで構成されます。
画面が12分割されているという事ですね。
これは理解必須なので、ぜひこちらのサイトを見てください。

参考にしてほしいサイト↓
https://websae.net/twitter-bootstrap-grid-system-21060224/

bootstrap導入

導入方法はいくつかありますが、今回はyarnで導入します！

ターミナルで、以下コマンドを実行して下さい！

yarn add jquery bootstrap@4.5 popper.js

次に、config/webpack/environment.jsの一番下に追記。

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

次に、app/javascriptの配下にstylesheetsフォルダを作成。
app/javascript/stylesheetsフォルダの配下に、
application.scssファイルを作成して、記述追加します。

@import '~bootstrap/scss/bootstrap';

次に、app/javascript/packs/application.jsに記述追加。

import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application" 

次にapp/views/layouts/application.html.erbを書き換えます。

<%= stylesheet_pack←ここです！_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

補足説明をします！
①stylesheet_link_tagの場合cssファイルは、app/assets 配下のファイルを参照で、
②stylesheet_pack_tagの場合は、app/javascript 配下のファイルを参照します。
今回は②で進めたいので②にしました！

これで、bootstrapの導入は完成です！
おめでとうございます！

さいごに

いかがでしたでしょうか？
意味を理解できたら、ノールックでコマンドを入力すれば、
3分もあればできると思います^^
便利な機能を使ってrailsを学んでいきましょう！