RailsにBootstrapを導入する
yarnでインストール
以下をコマンドで入力
yarn add jquery bootstrap@4.6.2 popper.js
次に、config/webpack/environment.jsを編集
下記を追記する
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
次に、app/javascriptの配下にstylesheetsフォルダを作成
@use '~bootstrap/scss/bootstrap';
次にapp/javascript/packs/application.jsを編集
以下を追記
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application";
次にapp/views/layouts/application.html.erbを編集
stylesheet_link_tagをstylesheet_pack_tagに変更
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
エラーメッセージから、application.js
内で ../stylesheets/application
をインポートしようとしているが、そのファイルが見つからないという問題が発生しています。このエラーを解消するには、いくつかの方法があります。
解決方法
-
SCSSファイルの確認
application.scss
(もしくはapplication.css
)がapp/javascript/stylesheets/
フォルダ内に存在するか確認してください。ファイルが見つからない場合、新たに作成する必要があります。-
もし
app/javascript/stylesheets/
フォルダが存在しない場合、以下の手順でフォルダを作成します。mkdir -p app/javascript/stylesheets
-
次に、
app/javascript/stylesheets/application.scss
を作成し、Bootstrapをインポートします。// app/javascript/stylesheets/application.scss @import 'bootstrap';
-
-
application.js
の修正
application.js
でapplication.scss
をインポートするために、次のように記述します。// app/javascript/packs/application.js import '../stylesheets/application'; import 'bootstrap';
これにより、
application.scss
が正しく読み込まれ、Bootstrapのスタイルも適用されるはずです。 -
Webpackerの再ビルド
上記の修正を加えた後、再度Webpackをビルドしてください。以下のコマンドを実行します。bin/webpack
-
ブラウザで確認
ビルドが完了した後、ブラウザをリロードして、Bootstrapが適切に適用されているか確認します。
これで問題が解決するはずです。もし、依然としてエラーが出る場合は、再度エラーメッセージを確認してください。