Import a .scss file in 'bower_components' folder using Middleman 4

#1

I have a .scss file /source/stylesheets/app.css.scss that has to import another file that’s inside /bower_components folder.

Example of app.css.scss content:

@import "mappy-breakpoints/mappy-breakpoints";

NOTE: the actual file is located on /bower_components/mappy-breakpoints/_mappy-breakpoints.scss.

Using Middleman 3, I have to instert this on config.rb:

sprockets.append_path File.join root, 'bower_components'

But sprockets doesn’t work on Middleman 4… What I have to do?

Thanks!

#2

Same problem here. I’ve read the docs about it and searched the web and github but without success.

I’m able to load the SCSS from the bower_components folder with:

config.rb:
compass_config do |config|
# Require any additional compass plugins here.
config.add_import_path File.expand_path(“bower_components/”, app.root)
end

But I think this won’t solve the problem of loading bootstraps JS and other stuff from the components directory.

So how does this work. I think the documentation for this new/changed feature has to be improved here.
For example: I just want to use bootstrap with my middleman app and be able to configure it via SCSS.

Help needed here too…

#3

There is a migration guide here: https://middlemanapp.com/basics/upgrade-v4/ which states:

Removed sprockets, add gem “middleman-sprockets”, “~> 4.0.0.rc” to Gemfile

Also, no need to use Compass if you use Sprockets, so remove middleman-compass gem from your Gemfile.

And that’s it, make sure you have this line in your config.rb:
sprockets.append_path File.join(root, 'bower_components')