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

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

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

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

Bootstrap

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

Q&A

0回答

795閲覧

rails bootstrap4の実装において、devtoolsで$$$1.fn.emulateTransitionEnd = transitionEndEmulator;で処理が止まる

Harluz

総合スコア19

Ruby on Rails 5

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

Bootstrap

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

0グッド

0クリップ

投稿2020/11/30 23:12

編集2020/12/01 13:11

RoRでポートフォリオを作成中。
bootstrapを導入し、フロント部分を調整したいと思っております。
その際にブラウザのdevtoolsのnetworkを確認すると画像の通りとなっております
devtools sources
$$$1.fn.emulateTransitionEnd = transitionEndEmulator;で検索をかけるとbootstrapの導入に係るものだと判明しました。
その後に、様々なサイトを参考にしコード等を修正するも、当該エラーが解決しないことから質問させていただきます。
(解決しなかったことから、修正を加える前のデータに戻しております。)

rails 5.2.4.4 ruby 2.6.2

gemfile

1source 'https://rubygems.org' 2git_source(:github) { |repo| "https://github.com/#{repo}.git" } 3 4ruby '2.6.3' 5 6# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 7gem 'rails', '~> 5.2.4', '>= 5.2.4.3' 8 9gem 'bcrypt' 10# Use mysql as the database for Active Record 11gem 'mysql2', '>= 0.4.4', '< 0.6.0' 12# Use Puma as the app server 13gem 'puma', '~> 3.11' 14# Use SCSS for stylesheets 15gem 'sass-rails', '~> 5.0' 16# Use Uglifier as compressor for JavaScript assets 17gem 'uglifier', '>= 1.3.0' 18# See https://github.com/rails/execjs#readme for more supported runtimes 19# gem 'mini_racer', platforms: :ruby 20 21# Use CoffeeScript for .coffee assets and views 22gem 'coffee-rails', '~> 4.2' 23# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 24gem 'turbolinks', '~> 5' 25# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 26gem 'jbuilder', '~> 2.5' 27# Use Redis adapter to run Action Cable in production 28# gem 'redis', '~> 4.0' 29# Use ActiveModel has_secure_password 30# gem 'bcrypt', '~> 3.1.7' 31 32# Use ActiveStorage variant 33# gem 'mini_magick', '~> 4.8' 34 35# Use Capistrano for deployment 36# gem 'capistrano-rails', group: :development 37 38# Reduces boot times through caching; required in config/boot.rb 39gem 'bootsnap', '>= 1.1.0', require: false 40 41gem 'bootstrap', '~> 4.1.1' 42gem 'jquery-rails' 43 44gem 'faker' 45 46gem 'carrierwave' 47gem 'rmagick' 48 49gem 'unicorn' 50 51group :development, :test do 52 # Call 'byebug' anywhere in the code to stop execution and get a debugger console 53 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 54 gem 'rspec-rails', '~> 3.7' 55 gem 'rails-controller-testing' 56 gem 'factory_bot_rails', '~> 4.11' 57 gem "pry-rails" 58 gem "pry-byebug" 59 gem "database_cleaner" 60end 61 62group :development do 63 # Access an interactive console on exception pages or by calling 'console' anywhere in the code. 64 gem 'web-console', '>= 3.3.0' 65 66 gem 'listen', '>= 3.0.5', '< 3.2' 67 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 68 gem 'spring' 69 70 gem 'spring-watcher-listen', '~> 2.0.0' 71 gem 'spring-commands-rspec' 72end 73 74group :test do 75 # Adds support for Capybara system testing and selenium driver 76 gem 'capybara', '>= 2.15' 77 gem 'selenium-webdriver' 78 # Easy installation and use of chromedriver to run system tests with Chrome 79 # gem 'chromedriver-helper' 80 81 gem 'webdrivers' 82end 83 84gem 'devise' 85 86# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 87gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 88 89group :development, :staging do 90 gem 'rubocop', '~> 0.82.0', require: false 91end 92 93group :production do 94 gem 'puma_worker_killer' 95end

applicationjs

1// This is a manifest file that'll be compiled into application.js, which will include all the files 2// listed below. 3// 4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 5// vendor/assets/javascripts directory can be referenced here using a relative path. 6// 7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8// compiled file. JavaScript code in this file should be added after the last require_* statement. 9// 10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11// about supported directives. 12// 13//= require jquery3 14//= require popper 15//= require bootstrap-sprockets 16 17//= require rails-ujs 18//= require activestorage 19//= require turbolinks 20//= require_tree .

applicationscss

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

application.html.erb

1<!DOCTYPE html> 2<html> 3 <head> 4 <title><%= full_title(yield(:title)) %></title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 10 <%= render 'layouts/shim'%> 11 </head> 12 13 <body> 14 <%= render 'layouts/header' %> 15 <div class="container"> 16 <% flash.each do |message_type, message| %> 17 <%= content_tag(:div, message, class: "alert alert-#{message_type}") %> 18 <% end %> 19 <%= yield %> 20 <%= render 'layouts/footer' %> 21 <%= debug(params) if Rails.env.development? %> 22 </div> 23 </body> 24</html>

その他、必要なデータがございましたら、その都度対応させていただきます。
また、そもそもの問題定義が間違っている場合は、ご指摘いただければと思います。

追記

applicationscss

1 @import "bootstrap-sprockets"; 2 @import "bootstrap";

applicationjs

1//= require jquery3 2//= require popper 3//= require bootstrap-sprockets 4//= require bootstrap <-追加 5 6//= require rails-ujs 7//= require activestorage 8//= require turbolinks 9//= require_tree .

上記の通り修正してみるもSass::SyntaxError inとなる
うまくbootstrapがimportできないようです。
さらに、下記の通りに修正してみる

applicationscss

1@import "bootstrap";

applicationjs

1//= require jquery3 2//= require popper 3//= require bootstrap 4 5//= require rails-ujs 6//= require activestorage 7//= require turbolinks 8//= require_tree .

このように修正した結果、エラー等は発生しなくなりました。
しかし、sprocketsを外したことによる影響範囲等を把握できていないこと及びこの修正が正しいのか不明です。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問