Bootstrap導入の流れ１

Bootstrapは有名なWebフレームワークで、CSSを細かく指定せずにサイトをある程度形にできる。レスポンシブにも対応してくれる便利なツール。Bootstrapを導入するとWebアプリケーションを効率よく開発できる。

①　gem 'webpacker', '~> 4.0'　（※既に記述あり）

②　jQueryとBootstrapを導入
　　% yarn add jquery bootstrap popper.js

③　package.json に
　　"bootstrap": "^4.5.3",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",　を記述。

④　config/webpack/environment.js　に
　　const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
　　を追加記述。

⑤　app/javascript/stylesheets/application.scss　に
　　
　　@import '~bootstrap/scss/bootstrap';　を記述。

⑥　app/javascript/packs/application.js　に

　　import 'bootstrap';
　　import '../stylesheets/application';　を一番上に記述。

⑦　app/views/layouts/application.html.erb　に
　　<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 　　　　　　　　　　'reload' %>　を追加