RoRでポートフォリオを作成中。
bootstrapを導入し、フロント部分を調整したいと思っております。
その際にブラウザのdevtoolsのnetworkを確認すると画像の通りとなっております
$$$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を外したことによる影響範囲等を把握できていないこと及びこの修正が正しいのか不明です。
あなたの回答
tips
プレビュー