Search code examples
cssruby-on-railssassasset-pipelinesite-prism

Rails: Can't find assets via SCSS @import in test environment


My team is using SitePrism for feature tests in a Rails 4 app, and we're currently restructuring our CSS assets in the project. One of the asset files includes a line that @imports from a subdirectory:

app/assets/stylesheets/lib/admin.scss.css:

   @import "base/base-admin";

and app/assets/stylesheets/lib/base/base-admin.scss in turn includes:

   @import "shared/reset";
   @import "shared/colors";
   @import "shared/breakpoints";
   @import "shared/grids";

This all works fine in development in the browser (I get no errors from requests to lib/admin.css, and I see the CSS rules are applied to the page correctly).

But when I run our feature tests, I get

Failure/Error: @page.load
ActionView::Template::Error:
  File to import not found or unreadable: base/base-admin.
  Load paths:
    /Users/duncanmalashock/ruby_projects/platform
    /Users/duncanmalashock/ruby_projects/platform/.bundle/gems/ruby/2.2.0/gems/bootstrap-sass-3.3.4.1/assets/stylesheets
 (in /Users/duncanmalashock/ruby_projects/platform/app/assets/stylesheets/lib/admin.scss.css)

However, none of the other assets are broken in the test environment. Why can't these be found?


Solution

  • This turned out to be a naming error. The suffixes on my manifest were ".scss.css", instead of ".css.scss" (which would have been correct).

    The Asset Pipeline starts with the last suffix, and tries to run a process that matches it, then repeats with the next suffix in.

    So the Pipeline was trying to @import a file in the wrong way (there's an @import directive in CSS and also differently behaving one in SCSS), which was leading to unexpected behavior.