CSS и Bootstrap не загружаются в приложении Rails 6 при развертывании в Heroku - PullRequest
4 голосов
/ 10 октября 2019

У меня есть проект Rails 6 с веб-упаковщиком по умолчанию. Я загрузил bootstrap и jQuery, следуя инструкциям, и все работает локально. Вот структура соответствующих файлов:
app / javascript / packs / application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

#This file that is being imported handles importing in bootstrap and custom CSS files
import '../stylesheets/application'

app / javascript / stylesheets / application.scss

@import "~bootstrap/scss/bootstrap";
#files below are custom css files
@import "reset";
@import "general";
@import "header";
@import "menu-overlay";

Он работает локально, но при развертывании его в Heroku стили начальной загрузки и мои пользовательские CSS не отображаются.

Вещи, которые я пробовал
1) Я попытался запустить ресурсы rake: прекомпилировать локально, а затем снова развернуть его
2) Я попытался запустить прекомпиляцию rake assetsв интерфейсе CLI Heroku: ресурсы rake heroku: прекомпиляция --app staging-app
3) Я добавил эту строку в свой файл environment / production.rb config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

Я заметил, что всякий раз, когда я делаюлюбые изменения локально в моих ресурсах, консоль показывает компиляцию webpacker .. Может быть, Heroku не запускает компиляцию моего webpacker?

Нужно ли добавлять зависимость для запуска сервера webpacker в производство в моем файле package.json?

"dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.2"
  }

Спасибо за любые входные данные!

Edit 1 Вот вывод моих логов heroku:

-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.6.3
-----> Installing dependencies using bundler 1.17.3
       Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
       The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
       Using rake 13.0.0
       Using concurrent-ruby 1.1.5
       Using i18n 1.7.0
       Using minitest 5.12.2
       Using thread_safe 0.3.6
       Using tzinfo 1.2.5
       Using zeitwerk 2.1.10
       Using activesupport 6.0.0
       Using builder 3.2.3
       Using erubi 1.9.0
       Using mini_portile2 2.4.0
       Using nokogiri 1.10.4
       Using rails-dom-testing 2.0.3
       Using crass 1.0.4
       Using loofah 2.3.0
       Using rails-html-sanitizer 1.2.0
       Using actionview 6.0.0
       Using rack 2.0.7
       Using rack-test 1.1.0
       Using actionpack 6.0.0
       Using nio4r 2.5.2
       Using websocket-extensions 0.1.4
       Using websocket-driver 0.7.1
       Using actioncable 6.0.0
       Using globalid 0.4.2
       Using activejob 6.0.0
       Using activemodel 6.0.0
       Using activerecord 6.0.0
       Using mimemagic 0.3.3
       Using marcel 0.3.3
       Using activestorage 6.0.0
       Using mini_mime 1.0.2
       Using mail 2.7.1
       Using actionmailbox 6.0.0
       Using actionmailer 6.0.0
       Using actiontext 6.0.0
       Using msgpack 1.3.1
       Using bootsnap 1.4.5
       Using bootstrap_form 4.3.0
       Using bundler 1.17.3
       Using dotenv 2.7.5
       Using method_source 0.9.2
       Using thor 0.20.3
       Using railties 6.0.0
       Using dotenv-rails 2.7.5
       Using erubis 2.7.0
       Using ffi 1.11.1
       Using temple 0.8.2
       Using tilt 2.0.10
       Using haml 5.1.2
       Using sexp_processor 4.13.0
       Using ruby_parser 3.14.0
       Using html2haml 2.2.0
       Using haml-rails 2.0.1
       Using jbuilder 2.9.1
       Using pg 1.1.4
       Using puma 3.12.1
       Using rack-proxy 0.6.5
       Using sprockets 3.7.2
       Using sprockets-rails 3.2.1
       Using rails 6.0.0
       Using rb-fsevent 0.10.3
       Using rb-inotify 0.10.0
       Using sass-listen 4.0.0
       Using sass 3.7.4
       Using sass-rails 5.1.0
       Using turbolinks-source 5.2.0
       Using turbolinks 5.2.1
       Using webpacker 4.0.7
       Bundle complete! 26 Gemfile dependencies, 69 gems now installed.
       Gems in the groups development and test were not installed.
       Bundled gems are installed into `./vendor/bundle`
       Bundle completed (0.47s)
       Cleaning up the bundler cache.
       The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
-----> Installing node-v10.15.3-linux-x64
-----> Installing yarn-v1.16.0
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.16.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.2.9: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > webpack-dev-server@3.8.2" has unmet peer dependency "webpack@^4.0.0".
       warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
       [4/4] Building fresh packages...
       Done in 21.74s.
       Compiling…
       Compiled all packs in /tmp/build_779b19b5de4194c7cd435766a173995c/public/packs
       Asset precompilation completed (45.01s)
       Cleaning assets
       Running: rake assets:clean
-----> Detecting rails configuration
###### WARNING:
       You set your `config.active_storage.service` to :local in production.
       If you are uploading files to this app, they will not persist after the app
       is restarted, on one-off dynos, or if the app has multiple dynos.
       Heroku applications have an ephemeral file system. To
       persist uploaded files, please use a service such as S3 and update your Rails
       configuration.

       For more information can be found in this article:
         https://devcenter.heroku.com/articles/active-storage-on-heroku

###### WARNING:
       We detected that some binary dependencies required to
       use all the preview features of Active Storage are not
       present on this system.

       For more information please see:
         https://devcenter.heroku.com/articles/active-storage-on-heroku

###### WARNING:
       No Procfile detected, using the default web server.
       We recommend explicitly declaring how to boot your server process via a Procfile.
       https://devcenter.heroku.com/articles/ruby-default-web-server
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> console, rake, web
-----> Compressing...
       Done: 61.3M
-----> Launching...
       Released v17
       https://career-lode-stage.herokuapp.com/ deployed to Heroku

Что касается ошибок в консоли, то здесь ошибок нет. Запустил логи героку - постановка приложения и ошибок не было. Я также открыл инспектор и не было ошибок

Редактировать 3 Я добавил тестовый файл javascript в пакетах, которые затем импортировал из моего файла application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

import './test.js'
import '../stylesheets/application'

В моем файле test.js у меня был какой-то код, который выводится на консоль, и он работает. Я ожидал бы, что это не будет работать, если поля css не работают / принесли это, но кажется, что файлы javascript работают.

1 Ответ

5 голосов
/ 11 октября 2019

Черт возьми. Причина, по которой он не загружается в Heroku, заключается в том, что я все еще использовал stylesheet_link_tag вместо stylesheet_pack_tag в моем файле application.html в папке макета.

Так что при локальной разработке, поскольку есть webpack-dev-сервер, он компилирует его. Тем не менее, в heroku, я должен указать это, и я могу сделать это, если я изменю stylesheet_link_tag, чтобы использовать вместо этого stylesheet_pack_tag.

 = stylesheet_pack_tag "application", media: 'all', 'data-turbolinks-track': 'reload'
 = javascript_pack_tag "application", 'data-turbolinks-track': 'reload'
...