Open3

RailsにBootstrapを導入する

かいかい

yarnでインストール
以下をコマンドで入力

 yarn add jquery bootstrap@4.6.2 popper.js
かいかい

次に、config/webpack/environment.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フォルダを作成

app/javascript/stylesheets/application.scss
@use '~bootstrap/scss/bootstrap';

次にapp/javascript/packs/application.jsを編集
以下を追記

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に変更

app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
かいかい

エラーメッセージから、application.js 内で ../stylesheets/application をインポートしようとしているが、そのファイルが見つからないという問題が発生しています。このエラーを解消するには、いくつかの方法があります。

解決方法

  1. 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';
      
  2. application.js の修正
    application.jsapplication.scss をインポートするために、次のように記述します。

    // app/javascript/packs/application.js
    import '../stylesheets/application';
    import 'bootstrap';
    

    これにより、application.scss が正しく読み込まれ、Bootstrapのスタイルも適用されるはずです。

  3. Webpackerの再ビルド
    上記の修正を加えた後、再度Webpackをビルドしてください。以下のコマンドを実行します。

    bin/webpack
    
  4. ブラウザで確認
    ビルドが完了した後、ブラウザをリロードして、Bootstrapが適切に適用されているか確認します。

これで問題が解決するはずです。もし、依然としてエラーが出る場合は、再度エラーメッセージを確認してください。