Middleman bower and Susy

Question

I'm using middleman 3.3.3 with bower to install some js/css packages. I can make my scss works but middleman can't find where susy framework is. (is inside bower_components). I'm also using middleman-sprockets.

So my config.rb is like that:

activate :sprockets

###
# Page options, layouts, aliases and proxies
###

# Per-page layout changes:
#
# With no layout
# page "/path/to/file.html", layout: false
#
# With alternative layout
# page "/path/to/file.html", layout: :otherlayout
#
# A path which all have the same layout
# with_layout :admin do
#   page "/admin/*"
# end

# Proxy pages (http://middlemanapp.com/basics/dynamic-pages/)
# proxy "/this-page-has-no-template.html", "/template-file.html", locals: {
#  which_fake_page: "Rendering a fake page with a local variable" }

###
# Helpers
###

# Automatic image dimensions on image_tag helper
# activate :automatic_image_sizes

# Reload the browser automatically whenever files change
# activate :livereload

# Methods defined in the helpers block are available in templates
# helpers do
#   def some_helper
#     "Helping"
#   end
# end


ready do
  sprockets.append_path File.join root, 'bower_components'
end

set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

set :fonts_dir, 'fonts'


# Build-specific configuration
configure :build do
  # For example, change the Compass output style for deployment
  # activate :minify_css

  # Minify Javascript on build
  activate :minify_javascript

  # Enable cache buster
  # activate :asset_hash

  activate :gzip

  # Use relative URLs
  activate :relative_assets

  # Or use a different image path
  # set :http_prefix, "/Content/images/"
end

My file tree is like:

myproject - bower_components - susy - sass - lib - templates - bower.json - ... - config - scripts - source - stylesheets - all.css - _setting.scss - ... - bower.json - config.rb - ....

all.css

/*
 * This file is the same as rails' application.scss
 */

//= require "_settings"

_settings.scss

// Add all required scss files/folders
@import "susy";

The error that i get tell me that it keep going to search "susy" in source/stylesheets. Any ints?

score 0 · Answer 1 · answered Jun 25 '14 at 18:59

0

Sprockets supports Bower, so you can add your Bower components path directly:
sprockets.append_path File.join root, 'bower_components'

http://middlemanapp.com/basics/asset-pipeline/#sprockets-import-path

answered Jun 25 '14 at 18:59

Andrey Mikhaylov - lolmaus

23,107
6
84
133

tnk for the answer but as you can see from my code, I already try to use this solution and it doesn't work. Now i'm using Grunt but still... – Giorgia Sambrotta Jun 25 '14 at 19:53

score 0 · Answer 2 · answered Aug 22 '14 at 20:06

In the config.rb

I ve added

sass_dir = 'source/stylesheets', 'bower_components'

after_configuration do
    @bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
    sprockets.append_path File.join "#{root}", @bower_config["directory"]
end

In mymain.scss

@import "bourbon";
@import "susy/sass/susy";
@import "normalize.scss/normalize";

All of them coming from bower

Middleman bower and Susy

2 Answers2