@import not working in SASS file in subfolder

Question

Setting the stage

I have the following stylesheet 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

The styleguide files live in a gem which serves the assets from vendor/stylesheets with help of a RoR engine.

The Problem

When I run my application in production with pre-compiled assets I am encountering problems pointing to the @import for the styleguide.

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)

The Workaround

There is no problem with the styleguide itself, because as soon as I import the subfolder/styles.css.sccs file from the application.css.scss file everything is working 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

Solutions

Has anyone ran into something like this before? Are there any known issues that could cause this to happen?

Answer 1

I'm going to guess this is a simple issue of modifying your path(s) in your styles.css.scss file. If your styleguide directory is not in your subfolder (which it doesn't seem like it is), you will have to point your import paths up a level in styles.css.scss. If that's the case, just try:

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

Because application.css.scss is located a level up, it recognizes these paths during import, where styles.css.scss does not.