質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

1回答

2569閲覧

bootstrap-sprocketsをインポートするとエラーが起きる

taam

総合スコア2

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

1クリップ

投稿2019/08/14 22:18

編集2022/01/12 10:55

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
railsのデザインにてbootstrapを用いています。
デザインのカスタマイズをしたくbootstrap-sprocketsを入れたいのですが、
application.scssに@import "bootstrap-sprockets";を記載したら
以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Sass::SyntaxError in Payments#index Showing /Users/tatsukawayoshitaka/kakeibo_app/app/views/layouts/application.html.erb where line #17 raised: File to import not found or unreadable: bootstrap-sprockets. Load paths: /Users/tatsukawayoshitaka/kakeibo_app/app/assets/config /Users/tatsukawayoshitaka/kakeibo_app/app/assets/images /Users/tatsukawayoshitaka/kakeibo_app/app/assets/javascripts /Users/tatsukawayoshitaka/kakeibo_app/app/assets/stylesheets /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/jquery-rails-4.3.5/vendor/assets/javascripts /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/coffee-rails-4.2.2/lib/assets/javascripts /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/actioncable-5.2.3/lib/assets/compiled /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activestorage-5.2.3/app/assets/javascripts /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/actionview-5.2.3/lib/assets/compiled /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/turbolinks-source-5.2.0/lib/assets/javascripts /Users/tatsukawayoshitaka/kakeibo_app/node_modules /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/popper_js-1.14.5/assets/javascripts /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/javascripts /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/javascripts /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/fonts /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/images /Users/tatsukawayoshitaka/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets

該当のソースコード

/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */ @import "bootstrap-sprockets"; @import "bootstrap";

試したこと

layouts内には以下も記載しています。
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

補足情報(FW/ツールのバージョンなど)

以下のgemを入れております。
gem 'devise'
gem 'bootstrap', '~> 4.3.1'
gem 'bootstrap-sass'
gem 'autoprefixer-rails'
gem 'jquery-rails'

gem 'kaminari'
gem 'sprockets-rails', '2.3.3'

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/14 22:34

(例)? いずれにしてもエラー内容に「なぜ起きたか」原因は書かれていますが、 そこから調べてみましたか?
taam

2019/08/14 22:51

失礼しました。例は誤字になります。訂正しておきます。 bootstrap-sprocketsが見つからずimportできません、というエラー原因と解釈しており、gem内にbootstrap-sprocketsが入っていることを確認し、bundle installもし直したのですが、解消されませんでした。
guest

回答1

0

scssを利用したいのか、sassを利用したいのか判断がつきませんでしたが、一度公式にあるsassまたはscssの設定に沿って試してみてはいかがでしょうか?

https://github.com/twbs/bootstrap-rubygem

ご提示頂いた設定は、公式と比べてみると必要のなさそうなgemを導入していたり、bootstrap-sprocketsの読み込みが違っていたりするようです。

投稿2019/08/15 01:41

no1knows

総合スコア3365

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問