[Rails7]application.bootstrap.scssの変更が反映されない

目的

Rails７でbin/devコマンドでサーバーを起動させた際に、エラーが起きたのでその解決方法を共有しつつ備忘録として残します。

開発環境

• rails 7.0.4.3
• ruby 3.1.2
• Bootstrap 5.3.3
• Popper.js 2.11.8

解決方法

事の始まり

下記の記事を参考にRails７にBootstrap５を導入しました。

無事bootstrapの導入が終わって動作確認をしていた際に、application.bootstrap.scssの変更がブラウザに反映されないことに気づきました。
これはおかしいと思って色々調べたり、試してみました。

Rails7ではbin/devを使う

投稿者は開発途中でrails6からrails7にアップデートしました。
アップデート後もrails sコマンドで何も問題なくサーバーが起動されていたので、そのままrails sコマンドを使ってました。

しかし、rails7ではbin/devコマンドが推奨されています。

その理由がUIを整えようとBootstrapを使い始めた際にわかりました。
bin/bevを使う事でJavaScript/CSSの変更反映や最適化を行ってくれるので、それを使っていなかった投稿者は当然

application.bootstrap.scssの変更が反映されなかった

という事です。

application.bootstrap.scssが反映されない根本的な原因はこれです。
bin/devコマンドを実行してエラーが出なければ変更がブラウザに反映されると思います。

bin/devについては下記の記事に詳しく書いてます

bin/devを使ってみる

ということでbin/devを使い始めたのですがエラーが発生しました。こういう新しいものを使ったり、環境構築にエラーはつきものですね。


foreman: command not found

まず出たエラーがこちら。これは簡単に直りました。
ターミナルでgem install foremanでforemanをインストールすれば直ります。

ターミナル

gem install foreman

error Command "watch:css" not found

次に出たエラーがこれです。
ここでハマったのですが、ふとBootstrapを導入した際のことを思い出しました。

bootstrap導入時にrails css:install:bootstrapを実行するとpackage.jsonに下のコードが追加されます

package.json

"scripts":{
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
}

投稿者は先ほど紹介したBootstrap5導入の記事のように下のように書き換えました。
これがダメだったみたいです。

package.json

"scripts":{
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
}

これでbin/devコマンドを実行するとerror Command "watch:css" not foundのエラーが出ました。

そこで下のように修正。

package.json

    "scripts":{
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
}

これで再度bin/devを実行すると無事サーバーを起動でき、application.bootstrap.scssの変更も反映されるようになりました。

めでたし。めでたし。

間違いや補足説明があればコメントいただけると嬉しいです。