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

Question

I'm trying to push tutorial blog rails (5.2.1) app to heroku. I've checked all similar questions on SO and haven't found the answer. The errors I'm getting are:

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(/(^[^#?]*)([#?]?.*$)/, '$2') %>\"")
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'

and:

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.

My custom.css.scss file is:

$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;
}

I have tryied with rails assets:precompile command but that didn't help. I've also checked for errors in custom.css.scss file but I couldn't find any. I understand that there is some sass syntax error on line: 314, but how can I find that error?

Answer 1

Per the documentation from 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.

Assuming you already have EJS hooked into your asset pipeline, your file needs to be named custom.css.ejs.scss .

Answer 2

I've solved it after you drove my attention to bootstrap-mincer. I've changed @import "bootstrap-mincer"; to @import "bootstrap-sprockets"; line in my custom.css.scss file and now everything works. Thx...