Rails app using SASS importing CSS from external gems not processing Sprockets directives

Question

I feel like this must be a relatively common issue, but my Google-foo has thus far failed me.

I have a Rails 4 app where I am using SASS for my CSS. I have a couple of gems that I am (forced) to use that primarily contain CSS. Let's say gem C has an index.css file that contains Sprockets directives for the CSS of that gem. When I @import gem-x/index my application.css file will contain simply the text of those Sprockets directives.

The only solution I have been able to find is to look at the source of the external gems so that I can manually @import each CSS file directly, e.g.

@import gem-x/file1
@import gem-x/file2
@import gem-x/file3

This is both tedious and requires me to know the structure of the assets for each external gem that does not provide SASS for consumption directly.

Is there any way to have Sprockets and the asset pipeline process the index.css files of these external gems when I @import them, rather than simply plopping there text into my application.css?

---

Edit:

This behavior appears to be tied to a breaking change in sass-rails 5+: https://github.com/rails/sass-rails/issues/297

That thread is a year old tho. Are there any workarounds or solutions these days?

Answer 1

If you are okay with importing all files from the gem instead of a specific file, you can simply do:

@import "*";