Ruby on Rails Bootstrap работает в разработке, но не в Heroku

Question

Я использую Ruby 2.4.1 / Rails 5.1.6

У меня есть выпадающие меню на панели навигации Bootstrap.Я наконец заставил их работать в моей среде разработки, но они не работают, когда их толкают в Heroku.Вот мой файл application.js:

//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

Я читал из других сообщений Stackoverflow, что некоторым людям повезло, когда они переупорядочили этот список.Тем не менее, это нарушает ситуацию в разработке, что не очень хорошо.

Вот мой Gemfile:

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

gem 'bootstrap-sass', '~> 3.3.7'
gem 'jquery-rails'

gem 'rails', '~> 5.1.4'
gem 'puma', '~> 3.7'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bcrypt', '~> 3.1.7'

group :development, :test do
  gem 'sqlite3'

  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  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.18'
  gem 'rails_12factor'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

application.scss:

/*
 * 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.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets"; // suggested change from SO user.
@import "bootstrap"; // suggested change from SO user.

custom.css.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

.listing {
  list-style: none;
  padding-left: 0;
}

.username-link {
  padding-top: 10px;
}

Я также читал ответы, в которых проблема была решена с помощью прекомпиляции ресурсов, однако это не решило меня (возможно, это было одной из причин, которая помогла ему работать в моей разработкесреда, хотя).

Я попытался очистить свои файлы cookie и историю как драматический шаг, но без радости.

Я попытался добавить @imports непосредственно в application.scss, а не в custom.css.scss..

Я удалил // = require rails_ujs , поскольку он избыточен с // = require jquery_ujs

Любые предложения приветствуются.

Answer 1

Удалите //= require rails-ujs из application.js, вам это не нужно, если вы используете //= require jquery_ujs, посмотрите это jquery-rails.

Мне нравитсяэто

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

Answer 2

Я нашел ответ в этом старом сообщении SO: Как сбросить кэш конвейера активов Heroku Rails4 .Я пытался скомпилировать ресурсы непосредственно в Heroku, используя heroku run --app NAMEOFAPP rake assets:precompile, вместо того, чтобы предварительно компилировать с помощью rake assets:precompile RAILS_ENV=production, а затем зафиксировать полученные ресурсы в GitHub.

Я не могу быть уверен, что некоторые из предложенных изменений непомощь в конце, так что спасибо всем, кто предложил изменения!Очень рад, что прошел эту головную боль.

Answer 3

Очевидно, вам не хватает некоторых вещей

В вашем Gemfile вам нужно добавить

gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '>= 3.2'//This one you need
gem 'jquery-rails'

bundle install и перезапустить ваш сервер

Импорт стилей Bootstrap в app /assets / stylesheets / application.scss:

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

bootstrap-sprockets необходимо импортировать перед начальной загрузкой, чтобы шрифты значков работали.

Требуется загрузка Javascripts в app / assets / javascripts / application.js:

//= require jquery
//= require bootstrap-sprockets