Bootstrapを導入後デプロイができなくなった

概要

Bootstrapを導入後、Herokuにデプロイしようとするとエラーがでる
(テスト環境では特段問題は見つからない)
git push heroku masterを実行すると下記のような出力が現れる

エラーメッセージ

remote:        Compiling...
remote:        Compilation failed:
remote:        Hash: 961ed3ac47682e79821e
remote:        Version: webpack 4.46.0
remote:        Time: 15267ms
remote:        Built at: 08/23/2022 4:13:52 PM
remote:         3 assets
remote:        Entrypoint application = js/application-63ab6a52e53769e8ecb6.js js/application-63ab6a52e53769e8ecb6.js.map
remote:         [0] (webpack)/buildin/module.js 552 bytes {0} [built]
remote:         [5] ./app/javascript/channels/index.js 205 bytes {0} [built]
remote:         [6] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
remote:         [7] ./app/javascript/stylesheets/application.scss 664 bytes {0} [built]
remote:         [9] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 1.81 KiB {0} [built] [failed] [1 error]
remote:        [10] ./app/javascript/packs/application.js + 58 modules 250 KiB {0} [built]
remote:             | ./app/javascript/packs/application.js 635 bytes [built]
remote:             |     + 58 hidden modules
remote:            + 8 hidden modules
remote:
remote:        ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss)
remote:        Module build failed (from ./node_modules/postcss-loader/src/index.js):
remote:        ParserError: Syntax Error at line: 1, column 38
remote:            at /tmp/build_53e092ee/app/javascript/stylesheets/application.scss:6:65088
remote:            at Parser.error (/tmp/build_53e092ee/node_modules/postcss-values-parser/lib/parser.js:127:11)
remote:            at Parser.operator (/tmp/build_53e092ee/node_modules/postcss-values-parser/lib/parser.js:162:20)
remote:            at Parser.parseTokens (/tmp/build_53e092ee/node_modules/postcss-values-parser/lib/parser.js:245:14)
remote:            at Parser.loop (/tmp/build_53e092ee/node_modules/postcss-values-parser/lib/parser.js:132:12)
remote:            at Parser.parse (/tmp/build_53e092ee/node_modules/postcss-values-parser/lib/parser.js:51:17)
remote:            at parse (/tmp/build_53e092ee/node_modules/postcss-custom-properties/index.cjs.js:47:30)
remote:            at /tmp/build_53e092ee/node_modules/postcss-custom-properties/index.cjs.js:333:24
remote:            at /tmp/build_53e092ee/node_modules/postcss/lib/container.js:194:18
remote:            at /tmp/build_53e092ee/node_modules/postcss/lib/container.js:139:18
remote:            at Rule.each (/tmp/build_53e092ee/node_modules/postcss/lib/container.js:105:16)
remote:            at Rule.walk (/tmp/build_53e092ee/node_modules/postcss/lib/container.js:135:17)
remote:            at /tmp/build_53e092ee/node_modules/postcss/lib/container.js:152:24
remote:            at Root.each (/tmp/build_53e092ee/node_modules/postcss/lib/container.js:105:16)
remote:            at Root.walk (/tmp/build_53e092ee/node_modules/postcss/lib/container.js:135:17)
remote:            at Root.walkDecls (/tmp/build_53e092ee/node_modules/postcss/lib/container.js:192:19)
remote:            at transformProperties (/tmp/build_53e092ee/node_modules/postcss-custom-properties/index.cjs.js:330:8)
remote:            at Object.syncTransform [as plugin] (/tmp/build_53e092ee/node_modules/postcss-custom-properties/index.cjs.js:522:5)
remote:            at /tmp/build_53e092ee/node_modules/postcss-preset-env/index.js:443:97
remote:         @ ./app/javascript/stylesheets/application.scss 2:26-228
remote:         @ ./app/javascript/packs/application.js
remote:
remote:
remote:        Browserslist: caniuse-lite is outdated. Please run:
remote:          npx browserslist@latest --update-db
remote:          Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
remote:
remote:
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to nobiapp.
remote:
To https://git.heroku.com/nobiapp.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/nobiapp.git'

質問

エラー文を読むと、application.scssの記述がよくないらしい

scss
1@import '~bootstrap/scss/bootstrap';

この記述を修正すれば、改善されるのでしょうか
それとも何かほかに原因があるのでしょうか

補足情報

Rails 6.1.4.6
ruby 2.7.6p219
Bootstrap 5.2
jquery 3.6.0
webpack 4.46.0

追記

bundle exec rake assets:precompile RAILS_ENV=production bin/rails assets:precompileを実行したところ、

bundle exec rake assets:precompile RAILS_ENV=production bin/rails assets:precompile
yarn install v1.22.5
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.47s.
Everything's up-to-date. Nothing to do

となりますが、bundle exec rake assets:precompile RAILS_ENV=productionを実行したところ、デプロイ時と同様のエラーが出ます

shinoharat

2022/08/24 06:11

> (テスト環境では特段問題は見つからない) とありますが、これはテスト環境で RAILS_ENV=production bin/rails assets:precompile または RAILS_ENV=production bin/rails webpacker:compile が問題なく成功するという意味でしょうか？

shinoharat

2022/08/24 06:15

エラー文が「Syntax Error at line: 1, column 38」なので、割と単純な原因な気がします。例えば @import '...' の後ろに全角スペースが紛れ込んでるとかないですか？また、ローカルで RAILS_ENV=production bin/rails assets:precompile を実行して同じエラーが出るか確認して欲しいです。