Search code examples
ruby-on-railsrubyrubygemsruby-on-rails-5

SassC::SyntaxError: Error: Invalid CSS after "@media screen": expected "{", was "(min-width: 768px) "

I am getting following error during asset precompiling. I am using Rails 5 and bootstrap 3.3.6

Looks like it is showing syntax error for code in bootstrap css.

After running RAILS_ENV=production rake assets:precompile

rake aborted!
SassC::SyntaxError: Error: Invalid CSS after "@media screen": expected "{", was "(min-width: 768px) "
        on line 16668:8 of stdin
>> @media screen (min-width: 768px) and (max-width: 992px) {

   -------^
stdin:16668
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sassc-2.2.0/lib/sassc/engine.rb:49:in `render'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/sass_compressor.rb:28:in `call'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:75:in `call_processor'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:57:in `block in call_processors'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:56:in `reverse_each'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:56:in `call_processors'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/loader.rb:134:in `load_from_unloaded'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/loader.rb:60:in `block in load'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/loader.rb:317:in `fetch_asset_from_dependency_cache'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/loader.rb:44:in `load'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/cached_environment.rb:20:in `block in initialize'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/cached_environment.rb:47:in `load'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/base.rb:66:in `find_asset'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/base.rb:73:in `find_all_linked_assets'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:142:in `block in find'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:114:in `block (2 levels) in logical_paths'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:228:in `block in stat_tree'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `each'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `stat_directory'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:227:in `stat_tree'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:105:in `each'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:105:in `block in logical_paths'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:104:in `each'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:104:in `logical_paths'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:140:in `find'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:186:in `compile'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:68:in `block (3 levels) in define'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-3.7.2/lib/rake/sprocketstask.rb:147:in `with_logger'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:67:in `block (2 levels) in define'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/gems/rake-12.3.3/exe/rake:27:in `<top (required)>'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/bin/ruby_executable_hooks:15:in `eval'
/Users/pandurang/.rvm/gems/ruby-2.3.1@selectpicz/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

I am not able to precompile assets.

Solution

  • Looking at the error output you provided the issue is with line:

    @media screen (min-width: 768px) and (max-width: 992px) {

    It looks like the syntax is indeed incorrect and the line is missing an and after screen, try:

    @media screen and (min-width: 768px) and (max-width: 992px)

    Reference: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    Checking the source code for Bootstrap 3.3.6 where this line is generated (LESS source code or SASS source code) there's no screen, so it should be:

    @media (min-width: 768px) and (max-width: 992px)

    It would be worth checking the source of Bootstrap 3.3.6 in your project and try replacing it with the official source CSS to see if that resolves this issue for you.