Rails/Bootstrap4/Rails6.1に導入 の履歴(No.1)

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

&tag(Rails/Bootstrap4/Rails6.1に導入);

目次†[edit]

関連ページ†[edit]

参考情報†[edit]

Bootstrap4を導入(Rails 6編)†[edit]

Bootstrap4とjQueryとFontawesomeを導入する。

yarnでjQueryとBootstrapとfontawesomeを導入†[edit]

• MacPortsの場合nodejs14だとエラーが発生したのでnodejs16をインストールしておく。
• 以下のコマンドを実行

  yarn add bootstrap@4 jquery popper.js
  yarn add @fortawesome/fontawesome-free

以下古い情報†[edit]

参考情報†[edit]

• Rails6にjQueryとBootstrapを導入する手順 – knmts.com

yarnでjQueryとBootstrapを実行†[edit]

• yarnで必要なファイルをインストール

  yarn add bootstrap jquery popper.js
  yarn add @fortawesome/fontawesome-free

jsをインクルード†[edit]

• app/javascript/packs/application.jsを編集。

  import '@fortawesome/fontawesome-free/js/all'
  require("@rails/ujs").start()
  //require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  require("bootstrap") //Bootstrapを追加
  
  import jQuery from 'jquery'
  window.jQuery = window.$ = jQuery
  

cssをインクルード†[edit]

• app/assets/stylesheets/application.cssを編集。

  *= require bootstrap/dist/css/bootstrap.min.css

• 先頭にインクルード。

scssをインクルード†[edit]

• app/assets/stylesheets/application.scssを編集。requireだと読み込まれない？

  @import "bootstrap/scss/bootstrap";

• manifest.jsは以下のままで良いようだ。

  //= link_tree ../images
  //= link_directory ../stylesheets .css
  //= link_directory ../javascripts .js
  

すべてのpackでjQueryを使えるように。†[edit]

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

• config/webpack/environment.jsを編集。jQueryのパスは相対パス指定が必要？

  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