Question

I’ve got a CSS file in vendor/assets/stylesheets, and I’d like to link to it in my application.css.scss file (or thereabouts). I was hoping that this would just render @import plus the asset path:

@import asset-path('lionbars.css', stylesheet)

But no such luck: I get

Invalid CSS after "@import ": expected uri, was "asset-path('lio..."

Either I’ve got the syntax wrong, or it’s because @import doesn’t accept dynamic strings, but I’m not sure.

So I see a few options. I can either:

1. Figure out the appropriate syntax, if it’s just a syntax issue.
2. Rename my file to application.css.scss.erb and replace other existing asset-path references to <%= asset_path('random/asset.png') %>. This makes my syntax highlighter very confused, and probably isn’t all that efficient. Otherwise, this works.
3. Rename my css file to _lionbars.css.scss and call @import "lionbars". Two reasons I don’t want to do this, is #1 generally speaking I don’t want to touch vendored code, and #2 there’s some IE8 specific stuff in there (<!--[if IE 8]>blahblah<![endif]-->) that can’t go in an scss file, and I don’t want to have to break the file up (and I’d still have to find a solution for the IE8 code and how to include that).

So, I’m hoping that the answer is #1, but I’m not sure. Any ideas?

Answer 1

The sass-rails website is quite clear:

Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES.

…but I tried it in both dev and production for straight-up css files and it worked just fine:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * ...
 *
 *= require_self
 *= require_tree .
 *= require lionbars
*/

So unless anybody has a better idea, this is what I’m going to do. I did have to move the IE8 specific comment into my layout as Sprockets threw up trying to compile it, but I still find this easier than the alternatives. If you’ve got a better solution than this though, I’d be glad to hear it! I’m not thrilled about using a solution that’s explicitly frowned upon on the sass-rails page.