bootstrap等の導入
Rails6 + Webpacker環境でアプリを作成しています。
以下の記事を参考にbootstrapとfontawesome(とjQuery)を導入しました。
###エラー内容
現状ですが、bootstrapもfontawesomeも使用すること自体はできています。
しかし、scssにこれらをimportするコードを記入して保存すると、ターミナルに次のエラーが表示されます。
Error: File "/Users/ユーザー名/rails/アプリ名/app/javascript/src/~bootstrap/scss/bootstrap" not found on line 1 of sass/Users/ユーザー名/rails/アプリ名/app/javascript/src/application.scss >> @import '~bootstrap/scss/bootstrap'; --------^
vscodeのEasySassが次のエラーを表示します。
EasySass: could not generate CSS file. See Output panel for details.
1行目がfontawesomeのimport文の場合も同様です
Error: File "/Users/ユーザー名/rails/アプリ名/app/javascript/src/~@fortawesome/fontawesome-free/scss/fontawesome" not found on line 1 of sass/Users/ユーザー名/rails/アプリ名/app/javascript/src/application.scss >> @import '~@fortawesome/fontawesome-free/scss/fontawesome'; --------^
bootstrapについて、試したこと
2つのimport文を削除したところエラーは出ないのでエラー箇所はこのimport文で間違いないはずです。
試しにbootstrapのimport文を削除してみたところ、bootstrapは使用できなくなりました。
以下のページを参考に、先頭の~の部分を変えてみました。
https://stackoverflow.com/questions/48434762/error-file-to-import-not-found-or-unreadable-bootstrap-scss-bootstrap
0. 導入サイトの通り、「@import 'bootstrap/scss/bootstrap'」と記載の部分を「node_modules/」に変更(@import 'node_modules/bootstrap/scss/bootstrap';)
0. 参考ページの回答のように
0. ~の部分を削除し「@import 'bootstrap/scss/bootstrap';」と記載
この3パターン全てでbootstrapは使用できるが上記のエラーが発生するという状況です。
fontawesomeについて
fontawesomeは少し事情が異なり、import文を削除してもアイコンを使用することができています。
application.jsに「import '@fortawesome/fontawesome-free/js/all'」とあるからではないかなと予想しています。
.jsでimportしているのであれば必要ないのでしょうか。
application.js
1 2import Rails from "@rails/ujs" 3import Turbolinks from "turbolinks" 4import * as ActiveStorage from "@rails/activestorage" 5import "channels" 6import "jquery" 7import "jquery-ui-dist/jquery-ui" 8import 'bootstrap' 9import '@fortawesome/fontawesome-free/js/all' 10import '../src/application.scss' 11import 'data-confirm-modal' 12import '../tag-it/tag-it.js' 13import '../tag-it/tag_manage.js' 14 15 16Rails.start() 17Turbolinks.start() 18ActiveStorage.start()
data-confirmやtag-itに関しても問題が発生しているのですが(data-confirmについては別件で質問をさせていただきました)、今回はこのbootstrap等のimportについてお聞きしたいです。
補足情報(FW/ツールのバージョンなど)
ruby 3.0.1
rails 6.1.3
webpackerを使用
あなたの回答
tips
プレビュー