Railsでyarnを使ってBootstrapを導入後、Herokuへのデプロイ時エラーに遭遇したので共有と備忘録として記事にしました。
開発環境
Ruby 3.0.1
Rails 6.1.7.6
導入したBootstrap5.0.2
yarnを使ってBootstrapを導入した手順
以下の記事の手順を参考にさせていただき導入しました。
Bootstrap5.0.2をインストール
$ yarn add bootstrap@5.0.2
popper.jsをインストール
$ yarn add @popperjs/core
application.html.erbに追記
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<% stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%# ここに追加↓ %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%# ここに追加↑ %>
</head>
<body>
<%= yield %>
</body>
</html>
application.scssの作成・追記
$ mkdir ./app/javascript/stylesheets
$ touch ./app/javascript/stylesheets/application.scss
作成したapplication.scssに以下の文を記入
app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap.scss";
application.jsに追記
application.scssを読み込む記述をapplication.jsに追記
app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
// ここを追加↓
import "bootstrap";
import "../stylesheets/application.scss";
// ここを追加↑
Rails.start()
Turbolinks.start()
ActiveStorage.start()
Herokuへのデプロイ時に起きたエラー
Bootstrap導入後、Herokuへデプロイしようとすると以下のようなエラーメッセージが返ってきました。
ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25
上記のエラーメッセージに書いてある./app/javascript/stylesheets/application.scss の1行目の25列目に構文エラーがあるそうなので確認すると、先ほど記載したyarnを使ってBootstrapをインストールする際に作成したファイルへ記述した内容でした。
↓エラーがあった部分
@import "~bootstrap/scss/bootstrap.scss";
解決方法
./app/javascript/stylesheets/application.scss にエラーがあることはわかりましたが、何が間違っているのか分からず。結局上記のエラーがあったファイルは削除してCDNを使用する手順でBootstrapを入れ直して無事デプロイできました。導入する際は以下の記事を参考にさせていただきました。
学んだこと
メンターさんも言っていたようにCDNで導入するのが簡単だしエラー少なく無難だと学びました📝