【Ruby on Rails】RailsにBoostrapを導入(yarn)
1690 ワード
開発環境
cloud9
Ruby2.6.3
Rails6.1.4
Boostrapを導入方法の種類
・CDNで導入する
・ファイルを配置する
・yarnでインストールする
導入手順
1.boostrap4.5バージョンをインストールする
$ yarn add jquery [email protected] 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配下を読み込む
お疲れ様でした。
何か誤りがありましたら、ご指摘宜しくお願い致します。
Author And Source
この問題について(【Ruby on Rails】RailsにBoostrapを導入(yarn)), 我々は、より多くの情報をここで見つけました https://zenn.dev/mame39/articles/ae2c7aa49f9f87著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol