部署到 Heroku 时，CSS 和 Bootstrap 未加载到 Rails 6 应用程序中

Question

我有一个带有默认 webpacker 的 Rails 6 项目。我按照教程加载了引导程序和 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/applications.scss

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

它在本地工作，但是当我将它部署到 Heroku 时，我的自定义 css 的引导样式不显示。

我尝试过的事情
1) 我尝试过运行 rake assets:precompile 在本地然后再次部署
2) 我尝试在 Heroku CLI 中运行 rake 资产预编译：heroku rake assets:precompile --app staging-app
3) 我已将此行添加到我的环境/production.rb 文件中 config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

我注意到，每当我在本地对资产进行任何更改时，控制台都会显示 webpacker 正在编译。可能是 Heroku 没有运行我的 webpacker 编译吗？

我是否必须在我的 package.json 文件中添加一个依赖项才能在生产环境中启动 webpacker 服务器？

"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"
  }

感谢您的任何意见！

编辑 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

至于控制台中的错误，没有错误。我运行了 heroku logs --app staging 并且没有错误。我也打开了inspector，没有错误

编辑 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 文件有效。

Answer 1

遇到同样的问题！ Heroku 需要上述两种解决方案：

布局>application.html.erb

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

-和-

assets/stylesheets/application.scss

-或-（您的主样式表存在的地方）

assets/javascript/stylesheets/application.scss

@import "bootstrap/scss/bootstrap.scss";

您会注意到您的本地开发服务器将需要<%= stylesheet_link_tag ... %>

在推送到 Heroku 进行生产时，只需将其切换为 <%= stylesheet_pack_tag ... %>。

希望这可以澄清:)

Answer 2

我遇到了同样的问题，并通过保留 stylesheet_link_tag 原样解决了它，但添加：

@import "bootstrap/scss/bootstrap.scss";

到 app/assets/stylesheets 文件夹中的 application.scss 文件。

Answer 3

该死。它没有在 Heroku 中加载的原因是因为我在布局文件夹中的 application.html 文件中仍然使用 stylesheet_link_tag 而不是 stylesheet_pack_tag。

所以在本地开发中，既然有webpack-dev-server，就编译它。但是，在 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'