Rails 5 - Heroku: Precompiling assets failed (Sass::SyntaxError: Invalid CSS after "...lflings-regular": expected ")

Question

我正在尝试将教程博客 rails (5.2.1) 应用程序推送到 heroku。我已经检查了所有关于 SO 的类似问题，但没有找到答案。我得到的错误是：

remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        Yarn executable was not detected in the system.
remote:        Download Yarn at https://yarnpkg.com/en/docs/install
remote:        I, [2020-02-21T17:17:19.342502 #751]  INFO -- : Writing /tmp/build_9a4b8f93edcb6949bd3f6eab0443fee7/public/assets/blog-c4dff50241ee865870a1e61848b014b1bfe41645844507124353abe96a2d563a.jpg
remote:        I, [2020-02-21T17:17:19.348422 #751]  INFO -- : Writing /tmp/build_9a4b8f93edcb6949bd3f6eab0443fee7/public/assets/workplace-8b957cb3928834865a124fc613d371b51b2bd32f806caa4fef1d538ea6af0bcf.jpg
remote:        I, [2020-02-21T17:17:24.225768 #751]  INFO -- : Writing /tmp/build_9a4b8f93edcb6949bd3f6eab0443fee7/public/assets/application-b0891f71e83fe8da7539d2c04309266db2d56be33bf3a5453b8ada6570a61a16.js
remote:        I, [2020-02-21T17:17:24.226500 #751]  INFO -- : Writing /tmp/build_9a4b8f93edcb6949bd3f6eab0443fee7/public/assets/application-b0891f71e83fe8da7539d2c04309266db2d56be33bf3a5453b8ada6570a61a16.js.gz
remote:        DEPRECATION WARNING on line 12 of /tmp/build_9a4b8f93edcb6949bd3f6eab0443fee7/vendor/bundle/ruby/2.5.0/gems/bootstrap-sass-3.4.1/assets/stylesheets/_bootstrap-mincer.scss:
remote:        #{} interpolation near operators will be simplified in a future version of Sass.
remote:        To preserve the current behavior, use quotes:
remote:        
remote:          unquote("\"<%- asset_path(\"#{$path}\".replace(/[#?].*$/, '')) + \"#{$path}\".replace(/(^[^#?]*)([#?]?.*$)/, '') %>\"")
remote:        
remote:        You can use the sass-convert command to automatically fix most cases.
remote:        
remote:        
remote:        DEPRECATION WARNING on line 16 of /tmp/build_9a4b8f93edcb6949bd3f6eab0443fee7/vendor/bundle/ruby/2.5.0/gems/bootstrap-sass-3.4.1/assets/stylesheets/_bootstrap-mincer.scss:
remote:        #{} interpolation near operators will be simplified in a future version of Sass.
remote:        To preserve the current behavior, use quotes:
remote:        
remote:          unquote('"<%- asset_path("#{$file}") %>"')
remote:        
remote:        You can use the sass-convert command to automatically fix most cases.
remote:        
remote:        
remote:        rake aborted!
remote:        Sass::SyntaxError: Invalid CSS after "...lflings-regular": expected ")", was ".eot".replace(/..."
remote:        (sass):314
remote:        /tmp/build_9a4b8f93edcb6949bd3f6eab0443fee7/vendor/bundle/ruby/2.5.0/gems/sass-3.7.4/lib/sass/scss/parser.rb:1308:in `expected'

和：

remote:        Tasks: TOP => assets:precompile
remote:        (See full trace by running task with --trace)
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to alpha-blog-emir.

我的 custom.css.scss 文件是：

$navbar-default-bg: #010101;

@import "bootstrap-mincer";
@import "bootstrap"; 

#logo {
  float: left;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-weight: bold;
}

#logo:hover{
  color: #fff;
  text-decoration: none;
}

.center{
  text-align: center;
}

.jumbotron {
  background-image: asset-url('workplace.jpg');
  height: 600px;
}

.jumbotron h1{
  color: #010101;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: -1px;
  font-weight: bold;
}

.btn-xlarge {
  font-size: 1.7em;
  background-color: black;
}

.article-actions{
  border-top: 1px solid #eaeaea;
  padding-top: 5px;
}

.description{
  margin-top: 0;
}

.article-title{
  font-weight: bold;
  font-size: 1.5em;
}

.article-body{
  border-top: 1px solid #eaeaea;
  padding-top: 15px;
  padding-bottom: 15px;
}

footer{
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a:hover{
  color: #222;
}

footer small{
  float: left;
}

footer ul{
  float: right;
  list-style: none;
}

footer ul li{
  float: left;
  margin-left: 15px;
}

我已经尝试使用 rails assets:precompile 命令，但没有帮助。我还检查了 custom.css.scss 文件中的错误，但我找不到任何错误。我知道第 314 行有一些 sass 语法错误，但我怎样才能找到该错误？

Answer 1

根据 bootstrap-mincer 中的文档：

// Mincer asset helper functions
//
// This must be imported into a .css.ejs.scss file.
// Then, <% %>-interpolations will be parsed as strings by Sass, and evaluated by EJS after Sass compilation.

假设您已经将 EJS 连接到您的资产管道中，您的文件需要命名为 custom.css.ejs.scss。

Answer 2

在你把我的注意力转移到 bootstrap-mincer 之后，我已经解决了它。我变了 @import "bootstrap-mincer";到 @导入"bootstrap-sprockets"；我的 custom.css.scss 文件中的一行，现在一切正常。谢谢...

Rails 5 - Heroku: Precompiling assets failed (Sass::SyntaxError: Invalid CSS after "...lflings-regular": expected ")

Rails 5 - Heroku: Precompiling assets failed (Sass::SyntaxError: Invalid CSS after "...lflings-regular": expected ")

css

rubygems

ruby-on-rails

sass

heroku