コードロード

エラー討伐

【Rails×Capistrano】自動デプロイ中に「SassC::SyntaxError: Error: File to import not found or unreadable: ~bulma/bulma.」エラー

Rails Capistrano AWS

エラー

環境はRails 6.0.3.6、Ruby2.7.2、Vue 2.6.12

SassC::SyntaxError: Error: File to import not found or unreadable: ~bulma/bulma.
        on line 16:1 of app/assets/stylesheets/style.scss
>> @import "~bulma/bulma";

結論

パスを明示的に全部記載してあげるだけ！！

@import "../../../node_modules/bulma/bulma.sass";

原因

bundle exec cap production deploy中のエラー。

曖昧なままだが、おそらく単純にパスが終えていなかったんだと思う。

ローカルだと読み込めていたのになぜだろう・・・

あと、そもそもパッケージマネージャー（yarn）でインストールすくことについてちゃんと理解していなかった。ググった記事のコピペで済ませてきた代償です。。。

解決方法

解決策として、最初に下記項目にあたりをつけてみた。

  • バージョン変わった？
  • importのやりかた変わった？
  • yarnでaddしたからCDNでやってみる？
  • ファイル名がおかしい？
  • またまたcapistranoの設定云々？ ひとつめ、サーバーでyarn add bulmaしてみたらローカルと違うバージョンがインストールされてしまったので、戻してみてバージョンを揃えてみたが、エラーは変わらず。

二つ目、importのやり方が変わった？

これを突き進めていくに当たって、「あれ？importってそもそもどこのファイル読みに行ってるんだっけ？」となり、そういえばググった記事を見つけてコピペしたら動いたのでそのままにしていたのを思い出した。

ここにきて初めてちゃんとyarnとnodeについて調べてみた。

どうやら /node_modules/bulma/bulma.sass このファイルを読み込みに行っているらしい。

では丁寧にちゃんと明示してあげよう！と下記のとおり、修正してみた。

# 修正前
@import "~bulma/bulma";
# 修正後
@import "../../../node_modules/bulma/bulma.sass";

これでちゃんと通りました！

なぜローカルでは修正前の書き方でもいいのに、本番環境だと明示してあげないといけないかはまだ謎。

学んだこと

  • yarn add したものは、node_modules内のフォルダに格納され、それを読み込む必要がある。
  • 記事のコピペは後で痛い目見る！