Rails/Bootstrap4/Rails6.1に導入 の履歴の現在との差分(No.1)

• 履歴一覧
• 差分 を表示
• ソース を表示
• 履歴 を表示
• Rails/Bootstrap4/Rails6.1に導入 へ行く。
  • 1 (2022-02-08 (火) 13:32:23)

• 追加された行はこの色です。
• 削除された行はこの色です。

#author("2022-02-08T04:32:23+00:00","default:src128","src128")
#author("2022-02-08T05:52:28+00:00","default:src128","src128")
&tag(Rails/Bootstrap4/Rails6.1に導入);
*目次 [#fcb9c0e6]
#contents
*関連ページ [#v1cb4e00]
*参考情報 [#uafbc7a7]
-[[Adding Bootstrap 4 to a Rails 6 project:https://www.linkedin.com/pulse/adding-bootstrap-4-rails-6-project-josh-lee]]

*Bootstrap4を導入(Rails 6編) [#k13ec77d]
*基本方針 [#q9088bfb]
-Rails 6.1でも引き続きwebpackerでJavaScriptを管理しなければならない。
-webpackerでJavaScriptだけでなくscssファイルを管理することもでき、その場合使用するタグやapplication.scssの場所が異なってくる。
-以下の方法はJavaScriptをwebpackerでscssを従来の方法(sprockets)で管理する方法。これでデフォルトのapplication.html.erbが使えるはず。
-ただしfontawesomeはapplication.jsで読み込む。

*Bootstrap4を導入(Rails 6.1編) [#k13ec77d]

Bootstrap4とjQueryとFontawesomeを導入する。


**yarnでjQueryとBootstrapとfontawesomeを導入 [#sef1ae5d]
-MacPortsの場合nodejs14だとエラーが発生したのでnodejs16をインストールしておく。
-以下のコマンドを実行
 bundle exec rails webpacker:install #最初の1回のみ必要
 yarn add bootstrap@4 jquery popper.js
 yarn add @fortawesome/fontawesome-free


*以下古い情報 [#m74efcb4]

**参考情報 [#kb7551f8]
-[[Rails6にjQueryとBootstrapを導入する手順 – knmts.com:https://knmts.com/become-engineer-4/]]

**yarnでjQueryとBootstrapを実行 [#l1580665]
-yarnで必要なファイルをインストール
 yarn add bootstrap jquery popper.js
 yarn add @fortawesome/fontawesome-free

**jsをインクルード [#u61005e7]
**jsをインクルード [#f48f2476]
-app/javascript/packs/application.jsを編集。
#pre{{
import '@fortawesome/fontawesome-free/js/all'
require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap") //Bootstrapを追加
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

//追加ここから
import 'bootstrap'
import '@fortawesome/fontawesome-free/js/all'
import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
//追加ここまで

Rails.start()
Turbolinks.start()
ActiveStorage.start()
}}
**scssをインクルード [#i5f15f28]
-app/assets/stylesheets/application.scssを新規作成。application.cssは削除する。
 @import 'bootstrap/scss/bootstrap';

**cssをインクルード [#s488eecc]
-app/assets/stylesheets/application.cssを編集。
 *= require bootstrap/dist/css/bootstrap.min.css
-先頭にインクルード。

**scssをインクルード [#taf6a04e]
-app/assets/stylesheets/application.scssを編集。requireだと読み込まれない？
 @import "bootstrap/scss/bootstrap";
-manifest.jsは以下のままで良いようだ。
**Bootstrapとfontawesomeの使用 [#ofbd88c8]
-application.html.erbの変更
#pre{{
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
    <div class="container">
      <%= yield %>
    </div>
}}

**すべてのpackでjQueryを使えるように。 [#n42b3b39]

※application.jsで「window.jQuery = window.$ = jQuery」した場合、以下は不要。むしろエラーになる。

-config/webpack/environment.jsを編集。jQueryのパスは相対パス指定が必要？
-index.html.erb
#pre{{
const { environment } = require('@rails/webpacker')

//ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
//ここまで

module.exports = environment

<h1><i class='fa fa-home'></i>Books</h1>
<table class="table">
(以下省略)
}}