Middleman with bower and susy

#1

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?

#2

Hello @designbygio

I use bower & foundation for a little side project and i think you a a problem with relative / absolute path

my config.rb

# Add bower's directory to sprockets asset path
after_configuration do

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

end

Feel free to clone this project and try by yourself i have wrote a clean README

#3

Thank you very much for your answer. Yes my problem is totally about path.
Actually now I decided to use Bourbon and Compass (less problems :slight_smile: ) and I FINALLY figured out how to make the javascript paths work with Bower.

I use a similar code to yours in config.rb.
But about the scss… no way. The paths don’t wont to works.
Now i make it work with a very bad/long manual path but they seems to not recognise sprockets…

Anyway I’ll check your project, thanks again

#4

@designbygio how did you solve to include javascripts ?

I am trying to include bootstrap-sass-official javascripts into my main.js file with
//= require "bootstrap-sass-official"
but it does not work. in this way it includes only the first js file (_affix.js) and any other path does not work.
The only path that is working is the full path bootstrap-sass-official/assets/javascripts/bootstrap.js . Is this the only way? I think it is annoyng the need of knowing the full path

#5

At the end I decided to go in a different way which it keeps also my app more clear.
I used Grunt task: concat, concat all my file in all.js file and minify this one.
And then just link all.min.js in my index like
<%= javascript_include_tag ‘all.min’ %>

#6

Ok Grunt is a great tool , but since I can control minification and concat also directly with middleman I was wandering if there is a simpler way. Anyway thanks, it just seems weird that we need 4 tools just to include a couple of JS libraries :slight_smile:

#7

Yes i know is bit crazy, I’m sure there is a better way but we change the goal of the app so I didn’t have this problem anymore :smiley: