#author("2022-02-08T04:32:23+00:00","default:src128","src128") &tag(Rails/Bootstrap4/Rails6.1に導入); *目次 [#fcb9c0e6] #contents *関連ページ [#v1cb4e00] *参考情報 [#uafbc7a7] *Bootstrap4を導入(Rails 6編) [#k13ec77d] Bootstrap4とjQueryとFontawesomeを導入する。 **yarnでjQueryとBootstrapとfontawesomeを導入 [#sef1ae5d] -MacPortsの場合nodejs14だとエラーが発生したのでnodejs16をインストールしておく。 -以下のコマンドを実行 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] -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 jQuery from 'jquery' window.jQuery = window.$ = jQuery }} **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は以下のままで良いようだ。 #pre{{ //= link_tree ../images //= link_directory ../stylesheets .css //= link_directory ../javascripts .js }} **すべてのpackでjQueryを使えるように。 [#n42b3b39] ※application.jsで「window.jQuery = window.$ = jQuery」した場合、以下は不要。むしろエラーになる。 -config/webpack/environment.jsを編集。jQueryのパスは相対パス指定が必要? #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 }}