@import does not work in a SASS file in a subfolder

Question

Level setting

I have the following style sheet structure:

/stylesheets | |-- /subfolder | | | + styles.css.scss | + application.css.scss 

application.html.haml

  = stylesheet_link_tag "application", media: "all" = stylesheet_link_tag "subfolder/styles", media: "all" 

application.css.scss

 @import "styleguide"; @import "styleguide/base/_all"; @import "styleguide/modules/_all-no-grid"; // Omitting rules not relevant to the problem 

styles.css.scss

 @import "styleguide"; @import "styleguide/grid/_grid"; @import "styleguide/modules/_all-grid"; // Omitting rules not relevant to the problem 

Styleguide files live in a gem that serves vendor/stylesheets assets using the RoR mechanism.

Problem

When I run my application in production with precompiled assets, I run into problems pointing to @import for the privilege.

 File to import not found or unreadable: styleguide. Load path: Sass::Rails::Importer([omitted]/app/assets/stylesheets/local/styles.css.scss) (in [omitted]/app/assets/stylesheets/local/styles.css.scss) 

Workaround

There is no problem with the style itself, because as soon as I import the subfolder/styles.css.sccs file from the application.css.scss file, everything works as expected.

application.html.haml

  = stylesheet_link_tag "application", media: "all" 

application.css.scss

 @import "styleguide"; @import "styleguide/base/_all"; @import "styleguide/modules/_all-no-grid"; @import "subfolder/styles" // Omitting rules not relevant to the problem 

styles.css.scss

 // Same as above, included for completeness @import "styleguide"; @import "styleguide/grid/_grid"; @import "styleguide/modules/_all-grid"; // Omitting rules not relevant to the problem 

Decision

Has anyone come across anything like this before? Are there any known issues that can cause this?

Answer 1

I'm going to guess that this is a simple problem changing your paths in the styles.css.scss file. If your styleguide directory is not in your subfolder (which seems to be wrong), you need to specify the import paths to the level in styles.css.scss. If so, just try:

 @import "../styleguide"; ... 

Since application.css.scss is at a higher level, it recognizes these paths during import, where styles.css.scss does not.