| 03 | アプリケーションの作成 << [ホーム] >> | 05 | deviceの利用
Bootstrapを利用する準備をします。
Yarnで必要なパッケージ「Bootstrap」「jquery」「popper.js」をインストールします。
コマンド
yarn add jquery@3.6.0 bootstrap@4.5.2 popper.js@1.16.1
記述追加 app/javascript/packs/application.js(11行目)
require("jquery") import 'bootstrap'; import '../stylesheets/application';
app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") import 'bootstrap'; import '../stylesheets/application'; // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true)
「app/javascript」フォルダに「stylesheets」フォルダを新規作成します。
作成した「stylesheets」フォルダに「application.scss」ファイルを新規作成します。
作成した「application.scss」ファイルに以下の記述を追加します。
app/javascript/stylesheets/application.scss(新規作成したファイル)
@import '~bootstrap/scss/bootstrap';
Webpackの設定をします。
「config\webpack\environment.js」ファイルに以下の記述を追加します。
記述追加 config\webpack\environment.js(5行目)
const webpack = require('webpack') environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery', Popper: ['popper.js', 'default'] }) )
config\webpack\environment.js
const { environment } = require('@rails/webpacker') module.exports = environment const webpack = require('webpack') environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery', Popper: ['popper.js', 'default'] }) )
「app/views/layouts/application.erb.html 」の「stylesheet_link_tag」を「stylesheet_pack_tag」に変更します。
記述変更 app/views/layouts/application.erb.html(8行目)
#削除<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
app/views/layouts/application.erb.html
<!DOCTYPE html> <html> <head> <title>MinpakuBs</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> </html>
これでBootstrapを使用する準備が整いました。
Railsのサーバーを起動してみます。
コマンド rails s
サーバーが起動したら、ブラウザで確認します。
http://localhost:3000
↓↓クリックして頂けると励みになります。
| 03 | アプリケーションの作成 << [ホーム] >> | 05 | deviceの利用