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

Question

我有一个默认Webpacker的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 / 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资产：预编译，然后再次部署
2）我已经尝试在Heroku CLI中运行rake资产预编译：heroku rake asset：precompile --app staging-app
3）我已将此行添加到我的environment / production.rb文件中 config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

我注意到，只要我在本地对资产进行任何更改，控制台都会显示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日志--app暂存，没有错误。我也打开了检查器，没有错误

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

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

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

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

Answer 2

该死的。之所以无法将其加载到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'