Ruby on rails 部署到Heroku时未在Rails 6应用程序中加载CSS和引导

Ruby on rails 部署到Heroku时未在Rails 6应用程序中加载CSS和引导,ruby-on-rails,heroku,bootstrap-4,ruby-on-rails-6,Ruby On Rails,Heroku,Bootstrap 4,Ruby On Rails 6,我有一个Rails6项目,带有默认的webpacker。我按照教程加载了bootstrap和jQuery,一切都在本地运行。 以下是相关文件的结构: app/javascript/packs/application.js require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('jquery')

我有一个Rails6项目,带有默认的webpacker。我按照教程加载了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'
@import "~bootstrap/scss/bootstrap";
#files below are custom css files
@import "reset";
@import "general";
@import "header";
@import "menu-overlay";
app/javascript/stylesheets/applications.scss

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'
@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资产:预编译--应用程序暂存应用程序
3) 我已将这一行添加到我的environments/production.rb文件中
config.public\u file\u server.enabled=ENV['RAILS\u SERVE\u STATIC\u FILES']。是否存在?

我注意到,每当我在本地对资产进行任何更改时,控制台都会显示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日志——应用程序转移,没有错误。我还打开了检查器,没有错误

编辑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文件似乎起作用了

该死的。之所以没有在Heroku中加载它,是因为我在布局文件夹中的application.html文件中仍然使用了stylesheet\u link\u标记而不是stylesheet\u pack\u标记

因此,在本地开发中,由于有一个webpack dev服务器,它会编译它。但是,在heroku中,我必须指定它,如果我将样式表\u link\u标记改为使用样式表\u pack\u标记,我就可以这样做

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

我也遇到了同样的问题,通过保持样式表\u link\u标签的原样来解决,但添加了:

@import“bootstrap/scss/bootstrap.scss”


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

也有同样的问题!Heroku需要上述两种解决方案:

布局>application.html.erb

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

资产/样式表/application.scss

@import "bootstrap/scss/bootstrap.scss";
-或者-(主样式表存在的地方)

assets/javascript/stylesheets/application.scss

@import "bootstrap/scss/bootstrap.scss";
您会注意到,您的本地开发服务器将需要

当推到Heroku进行生产时,只需将其切换到


希望这能澄清:)

您在控制台中遇到了什么错误?您能粘贴Heroku部署输出吗?我得到了一些信息,比如
warn安装v1.16.0远程:[1/4]解析软件包。。。远程:[2/4]正在获取包。。。兼容性检查。将其从安装中排除。远程:[3/4]正在链接依赖项。。。远程:[4/4]正在生成新包。。。远程:在22.04秒内完成。远程:编译…远程:在/tmp/build_c088b78bcafdbababa7db163b4259759db/public/packs-remote中编译所有包:资产预编译已完成(29.93s)
@rockwelllice中似乎没有任何错误console@BSeven我已经在我的编辑1中附加了heroku部署输出,我已经在这个问题的圈子里了lol,只希望DHH从rails堆栈中删除链轮,这样我们就有了1个解决方案,而不是sprocket+webpacker,麻烦太多了。不幸的是,它没有加载我的scss文件。我仍然对它在本地开发中如何工作而在生产中如何不工作感到困惑?这对我来说很有用。简单易用。我不知道在什么情况下需要更复杂的解决方案。