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

Question

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.

Teeth

Answer 1

Adding Sprockets per this forum post got the imports working like they used to.

In Gemfile, add sprockets and a rails-assets block with the gemfiles chosen from step 1:

# Gemfile
gem 'middleman-sprockets', '4.0.0.rc.3'

source 'https://rails-assets.org' do
  gem 'rails-assets-bootstrap-autohidingnavbar', '1.0.0'
  gem 'rails-assets-jquery', '2.1.1'
  gem 'rails-assets-slick.js', '1.5.7'
end

In your config.rb, add the following block to enable the asset pipeline and add RailsAssets gems to your load path:

# config.rb
# General configuration
activate :sprockets

if defined? RailsAssets
  RailsAssets.load_paths.each do |path|
    sprockets.append_path path
  end
end

Teeth

Answer 2

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

This is your issue. Middleman itself doesn't touch anything with a leading underscore. The .scss files are processed because that's SASS doing the work.

The solution I'm using (until I find another) is to build the second css file and just include it in my layout.

In your case you might try removing the underscore; without the .css suffix it shouldn't be included in the output.

Enjambement

Answer 3

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.

Huggins