🐣
【Ruby on Rails】RailsにBoostrapを導入(yarn)
開発環境
cloud9
Ruby2.6.3
Rails6.1.4
Boostrapを導入方法の種類
・CDNで導入する
・ファイルを配置する
・yarnでインストールする
導入手順
1.boostrap4.5バージョンをインストールする
$ yarn add jquery bootstrap@4.5 popper.js
2.config/webpack/enviroment.jsを編集する
:
:
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
:
:
3.フォルダの作成
app/javascriptの配下にstylesheetsフォルダを作成する
4.ファイルを作成
app/javascript/stylesheetsの配下にファイルを作成する
5. app/javascript/packs/application.jsを編集・追加
:
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"
:
- app/views/layouts/application.html.erbを書き換える
【変更前】
:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
:
【変更後】
:
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
:
stylesheet_link_tagとstylesheet_pack_tagの違い
stylesheet_link_tag: app/assetes配下を読み込む
stylesheet_pack_tag: app/javascript配下を読み込む
お疲れ様でした。
何か誤りがありましたら、ご指摘宜しくお願い致します。
Discussion