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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

Bootstrap

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

3679閲覧

RailsでBootstrapが突然適用されなくなった

tat_23

総合スコア18

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

Bootstrap

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/07/12 23:20

前提・実現したいこと

以前のようにBootstrap4が適用された状態にしたいです。

Railsで初めてのオリジナルアプリを製作中です。
開発も後半に差し掛かってきたところ、突然開発環境でBootstrapが全く読み込まれなくなりました。

一部や1ページだけではなく全て適用されず、殺風景になってしまいました。

また、表示されていた画像も表示されません。

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

エラーメッセージなどはなく、殺風景なページが表示されるだけです。

ここまで問題なく読み込まれていていましたが、フォームで画像を扱いたいと考え、gem 'carrierwave'を導入してみました(参考にしたサイト)。

この通りいじってみると、Bootstrapが読み込まれなくなっていたということです。

デバッグのために画像を扱うに祭して追加した処理(carrierwaveの削除→bundle installを含む)を全部巻き戻してみましたが状況は改善しませんでした。

1日格闘しましたが全く手がかりが掴めず...

お手数ですがどなたかお力を貸していただけないでしょうか?

該当のソースコード

application.html.erb

<!DOCTYPE html> <html> <head> <title>NonsmokingApp</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= render "layouts/shim" %> </head> <body> <%= render "layouts/header" %> <div class="container"> <% flash.each do |message_type, message| %> <div class="alert alert-<%= message_type %>"><%= message %></div> <% end %> <%= yield %> <%= render "layouts/footer" %> <%= debug(params) if Rails.env.development? %> </div> </body> </html>

application.scss

@import "bootstrap"; /* * 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, * vendor/assets/stylesheets, or vendor/assets/stylesheets of plugins, if any, * 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 styles defined in the other CSS/SCSS * files in this directory. It is generally better to create a new file per * style scope. * *= require_tree . *= require_self */

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require activestorage //= require turbolinks //= require jquery3 //= require popper //= require bootstrap-sprockets (function($) { "use strict"; // Start of use strict // Smooth scrolling using jQuery easing $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: (target.offset().top - 54) }, 1000, "easeInOutExpo"); return false; } } }); // Closes responsive menu when a scroll trigger link is clicked $('.js-scroll-trigger').click(function() { $('.navbar-collapse').collapse('hide'); }); // Activate scrollspy to add active class to navbar items on scroll $('body').scrollspy({ target: '#mainNav', offset: 56 }); // Collapse Navbar var navbarCollapse = function() { if ($("#mainNav").offset().top > 100) { $("#mainNav").addClass("navbar-shrink"); } else { $("#mainNav").removeClass("navbar-shrink"); } }; // Collapse now if page is not at top navbarCollapse(); // Collapse the navbar when page is scrolled $(window).scroll(navbarCollapse); })(jQuery); // End of use strict

Gemfile

source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.3' gem 'rails', '~> 5.2.3' gem 'bcrypt', '3.1.12' gem 'will_paginate', '3.1.6' gem 'bootstrap-will_paginate', '1.0.0' gem 'puma', '~> 3.11' gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails' gem 'sass-rails', '~> 5.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.2' gem 'turbolinks', '~> 5' gem 'jbuilder', '~> 2.5' gem 'bootsnap', '>= 1.1.0', require: false #carrierwaveは一旦消しました。 group :development, :test do gem 'sqlite3', '~> 1.3.6' gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do gem 'better_errors' gem 'binding_of_caller' gem 'web-console', '>= 3.3.0' gem 'listen', '>= 3.0.5', '< 3.2' gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end group :production do gem 'pg', '0.20.0' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

必要なファイル等がありましたら追加しますので教えて頂けますと幸いです。

以上、よろしくお願いいたします。

試したこと

・画像を扱える機能導入手順の戻り

・rails serverの再起動

・sprockets-rails が v2.3.2以上であることの確認

適用されない時のチェックポイントを確認するサイトでの各項目の確認

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

・ macOS

・RubyMineで開発中

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

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

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

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

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

m.ts10806

2019/07/13 02:13

Bootstrap本体CSSをいじることがないのでしたらCDN利用したら良いかと思うのですが、それはしたくないという状況でしょうか?
tat_23

2019/07/13 08:29

ご指摘ありがとうございます。 確かにCDNを使っていなかったのでやってみました。 レイアウトに関しては解決したのですが、画像が相変わらず表示されずにalt属性の部分が表示されている状況です。 何か考えられることがあればアドバイス頂けないでしょうか。
m.ts10806

2019/07/13 09:03

それとこれとは別問題なので一度「CDN導入してみることにした」として自己解決にしてこちらの質問は締められては
tat_23

2019/07/14 08:21

ご指摘ありがとうございました!!
guest

回答1

0

ベストアンサー

画像も表示されないとのことなので、静的ファイルが配信されていないのではないかと推測します。
おそらくですが、production環境で起動しているのでは?と思います。

rails s -e developmentとdevelopment環境を明示することで改善しませんか?
そうであれば、環境変数RAILS_ENVdevelopmentもしくは削除することをおすすめします。

もし改善しないのであれば、config.public_file_server.enabled = falseになっていないかを確認

また、log/development.logを確認することで原因が把握できるかもしれません

投稿2019/07/13 10:14

asm

総合スコア15147

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

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

tat_23

2019/07/14 08:22

ありがとうございます、解決いたしました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問