less-rails: ArgumentError - invalid byte sequence in UTF-8

I’m getting the following error when rails is attempting to precompile a stylesheet.

ArgumentError - invalid byte sequence in UTF-8:
  less-rails (2.7.1) lib/less/rails/import_processor.rb:23:in `depend_on'
  less-rails (2.7.1) lib/less/rails/import_processor.rb:27:in `block in depend_on'
  less-rails (2.7.1) lib/less/rails/import_processor.rb:24:in `depend_on'
  less-rails (2.7.1) lib/less/rails/import_processor.rb:27:in `block in depend_on'
  less-rails (2.7.1) lib/less/rails/import_processor.rb:24:in `depend_on'
  less-rails (2.7.1) lib/less/rails/import_processor.rb:18:in `evaluate'
  tilt (2.0.2) lib/tilt/template.rb:99:in `render'
  sprockets (3.5.2) lib/sprockets/legacy_tilt_processor.rb:25:in `call'
  sprockets (3.5.2) lib/sprockets/processor_utils.rb:75:in `call_processor'
  sprockets (3.5.2) lib/sprockets/processor_utils.rb:57:in `block in call_processors'
  sprockets (3.5.2) lib/sprockets/processor_utils.rb:56:in `call_processors'
  sprockets (3.5.2) lib/sprockets/loader.rb:134:in `load_from_unloaded'
  sprockets (3.5.2) lib/sprockets/loader.rb:60:in `block in load'
  sprockets (3.5.2) lib/sprockets/loader.rb:318:in `fetch_asset_from_dependency_cache'
  sprockets (3.5.2) lib/sprockets/loader.rb:44:in `load'
  sprockets (3.5.2) lib/sprockets/cached_environment.rb:20:in `block in initialize'
  sprockets (3.5.2) lib/sprockets/cached_environment.rb:47:in `load'
  sprockets (3.5.2) lib/sprockets/bundle.rb:23:in `block in call'
  sprockets (3.5.2) lib/sprockets/utils.rb:183:in `dfs'
  sprockets (3.5.2) lib/sprockets/bundle.rb:24:in `call'
  sprockets (3.5.2) lib/sprockets/processor_utils.rb:75:in `call_processor'
  sprockets (3.5.2) lib/sprockets/processor_utils.rb:57:in `block in call_processors'
  sprockets (3.5.2) lib/sprockets/processor_utils.rb:56:in `call_processors'
  sprockets (3.5.2) lib/sprockets/loader.rb:134:in `load_from_unloaded'
  sprockets (3.5.2) lib/sprockets/loader.rb:60:in `block in load'
  sprockets (3.5.2) lib/sprockets/loader.rb:318:in `fetch_asset_from_dependency_cache'
  sprockets (3.5.2) lib/sprockets/loader.rb:44:in `load'
  sprockets (3.5.2) lib/sprockets/cached_environment.rb:20:in `block in initialize'
  sprockets (3.5.2) lib/sprockets/cached_environment.rb:47:in `load'
  sprockets (3.5.2) lib/sprockets/base.rb:66:in `find_asset'
  sprockets (3.5.2) lib/sprockets/base.rb:73:in `find_all_linked_assets'
  sprockets (3.5.2) lib/sprockets/manifest.rb:134:in `block in find'
  sprockets (3.5.2) lib/sprockets/manifest.rb:133:in `find'
  sprockets-rails (3.0.0) lib/sprockets/railtie.rb:41:in `precompiled_assets'
  sprockets-rails (3.0.0) lib/sprockets/railtie.rb:34:in `asset_precompiled?'
  sprockets-rails (3.0.0) lib/sprockets/railtie.rb:205:in `block (3 levels) in <class:Railtie>'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:346:in `precompiled?'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:350:in `raise_unless_precompiled_asset'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:335:in `find_debug_asset'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:217:in `block in lookup_debug_asset'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:230:in `block in resolve_asset'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:229:in `resolve_asset'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:216:in `lookup_debug_asset'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:129:in `block in javascript_include_tag'
  sprockets-rails (3.0.0) lib/sprockets/rails/helper.rb:128:in `javascript_include_tag'
  app/views/layouts/main_site.html.erb:6:in `_app_views_layouts_main_site_html_erb__3304990932101485186_69970548490080'
[snipped]

Upon further analysis, it seems the issue is that less-rails is resolving a css @import directive to refer to a image asset in my rails app rather than another stylesheet. Obviously, trying to parse a binary image as text/css explains this error.

The including CSS (really an .scss) file in question is innocuous enough. The error is thrown on a line containing: @import 'theme/responsive'; and the file is located at app/assets/stylesheets/contrib/theme.scss.

In my debugging, I inserted a breakpoint here and evaluated the following code to receive these values:

>> base 
=> "contrib"
>> path 
=> "theme/responsive" 
>> scope.resolve('theme/responsive') 
=> "/home/mvastola/src/partyista_web/app/assets/images/theme/responsive.png" 
>> scope.resolve('theme/responsive.scss') 
=> "/home/mvastola/src/partyista_web/app/assets/stylesheets/theme/responsive.scss"

I’m not too familiar with how this gem works/is supposed to work, but it would seem to me that app/assets/images shouldn’t be searched for CSS/SCSS/LESS imports at all.

Note that this issue was solved (once I deciphered the source of the error from the cryptic message) by changing @import 'theme/responsive'; to use a relative path: @import '../theme/responsive';, which perhaps is the better way to go regardless, but that is beside the point that the former should have been supported (or at least returned a more descriptive error).

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 2
  • Comments: 23 (2 by maintainers)

Most upvoted comments

Can you test this?

gem 'less-rails', github: 'metaskills/less-rails', branch: 'depends_only_on_less_files'

this is merged in less-rails? gem 'less-rails', github: 'metaskills/less-rails', branch: 'depends_only_on_less_files' worked for me! 😄 THANKS!!!