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?
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.