David Silva Smith David Silva Smith - 4 months ago 40
CSS Question

How do I import a .scss.erb file in middleman4?

How do I import a .scss.erb file in Middleman 4?

I just upgraded from Middleman 3 to 4. I think this is my last issue...

I have an

all.css.scss
file that looks like this:

@charset "utf-8";

@import "settings";
@import "imports";
@import "base";
@import "signature_pad"


All the files import except for imports.

The difference with
settings
is that it is
_imports.scss.erb


Then when I try and load all.css I get this:

Error: File to import not found or unreadable: imports.
Load paths:
/Users/myMyserId/apps/projectName/source/assets/css
/Users/myUserId/.rvm/gems/ruby-2.0.0-p451/gems/compass-core-1.0.3/stylesheets
Compass::SpriteImporter
/Users/myUserId/apps/projectName/source/assets/css
/Users/myUserId/.rvm/gems/ruby-2.0.0-p451/gems/compass-core-1.0.3/stylesheets
Compass::SpriteImporter
/Users/myUserId/apps/projectName/source/assets/css
/Users/myUserId/.rvm/gems/ruby-2.0.0-p451/gems/compass-core-1.0.3/stylesheets
Compass::SpriteImporter
on line 4 of /Users/myUserId/apps/projectName/source/assets/css/all.css.scss


I think the issue is that the erb is not processing the file before making it a .scss.

Answer

Here is an example to get it working:

// all.css.scss.erb

<%= partial './_settings.scss' %>

// rest of css…

With the settings-file being

  • named _settings.scss.erb
  • located as a sibling file to all.css.scss and
  • it can then contain erb code! :)

That said, I strongly suggest looking into the external-pipeline feature in Middleman 4. It's very powerful and allows better handling of SASS/SCSS.