couldn't find file 'bootstrap/glyphicons-halflings-regular.eot' error [bower]

[clyfe]

Environment:
gem "middleman", "> 3.1.0"
gem 'middleman-bower', '> 1.0.2'

Steps to reproduce

bower install bootstrap-sass-official -S

In application.css.scss

@import "bootstrap-sass-official";

Error:

Sprockets::FileNotFound at /
couldn't find file 'bootstrap/glyphicons-halflings-regular.eot' (in /[...]/source/stylesheets/application.css.scss:1)

Note:
Not sure how the bower distribution of bootstrap-sass is meant to be used, it seems not not work out of the box. Let me know if I'm doing something wrong.

[glebm]

You can use gem 'bootstrap-sass' which requires sprockets integration automatically, instead of the bower package. It works with middleman out of the box because middleman uses Sprockets asset pipeline (same one used in Rails).

[clyfe]

Yes indeed that is what I am doing currently.
I'd like to migrate to bower tough, and have the above issue.

[cmbankester]

Same here. Seems like those files don't exist when using Bower.

[glebm]

@clyfe The correct file name to import is @import "bootstrap-sass".
@cbankester When using without ruby, you will also need to @import "bootstrap-compass" (available since 509a2e6) before bootstrap-sass.

[glebm]

@clyfe There is an experimental pure-Sass Sprockets integration on master, which should make it possible to use bootstrap-sass with Middleman / Rails and Bower without using the gem

Could you try it and let us know if it works? Thanks

@import "bootstrap-sprockets"
@import "bootstrap"

[mrleeio]

@glebm No luck using bootstrap-sprockets.

Any updates on this issue?

[carlosantoniodasilva]

I was trying this out too, and with the example imports in a rails app here's the error I get:

File to import not found or unreadable: bootstrap-sprockets.

I had to import the full path for the error to go away:

@import "bootstrap-sass/vendor/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/vendor/assets/stylesheets/bootstrap";

However the original issue still happens:

couldn't find file 'bootstrap/glyphicons-halflings-regular.eot'

I'm trying to fiddle with the $icon-font-path: "bootstrap/" !default; definition, with no luck so far.

[ACPK]

I'm also having the exact same issue.

[glebm]

@ACPK @carlosantoniodasilva You can try setting $icon-font-path: "bootstrap-sass/vendor/assets/fonts/bootstrap/" before importing bootstrap-sass.

[roalcantara]

@glebm in my environment (Rails 4.1.0.rc2) is almost ok..

In my bower.json:

{
  "name": "caesars",
  "version": "0.0.0",
  "homepage": "littlecaesars.herokuapp.com",
  "authors": [
    "@roalcantara"
  ],
  "description": "Caesar Online Pizza Shop",
  "moduleType": [
    "globals"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.1",
    "jquery-ujs": "*",
    "bootstrap-sass-official": "~3.1.1+2",
    "jquery-prettyPhoto": "*",
    "eonasdan-bootstrap-datetimepicker": "~3.0.0",
    "jquery-meiomask": "~1.1.13",
    "html5shiv": "~3.7.2",
    "respond": "~1.4.2",
    "twitter-bootstrap-wizard": "~1.0.0"
  }
}

In application.css.scss:

$icon-font-path: "bootstrap-sass-official/vendor/assets/fonts/bootstrap/";

/*
 *= require_self
 *= require bootstrap-sass-official
 *= require_tree .
 */

in application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery-ujs
//= require bootstrap-sass-official

However, it seems that only the file affix.js is loading, check it out:

Am I missing something?

In addition, I'm not using the "middleman" and 'middleman-bower' gems, though. Do I've got to use them?

[mrleeio]

Sprockets supports Bower, so you can add your Bower components path directly:

sprockets.append_path File.join root, 'bower_components'

I noticed that changes to the font path variable are not being honoured regardless of where I change it.

[glebm]

@roalcantara Do not //= require inside Sass, use @import instead. Sprockets require concatenates after the files have been compiled, and the files do not share a context, meaning the file imported will not see $icon-font-path.

[roalcantara]

Hi @glebm, thank you so much for your help.

Well, I've changed the the imports:

In application.css.scss:

$icon-font-path: "bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
@import "bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";
/*
 *= require_self
 *= require eonasdan-bootstrap-datetimepicker
 *= require_tree .
 */

And the error is back:

Sprockets::FileNotFound - couldn't find file 'bootstrap/glyphicons-halflings-regular.eot'
  (in .../app/assets/stylesheets/application.css.scss:1):
  sprockets (2.11.0) lib/sprockets/base.rb:153:in `resolve'
  sprockets (2.11.0) lib/sprockets/context.rb:108:in `resolve'
  sprockets (2.11.0) lib/sprockets/context.rb:131:in `depend_on_asset'...

Btw, my application.rb:

require File.expand_path('../boot', __FILE__)
require 'rails/all'
Bundler.require(*Rails.groups)

module Caesars
  class Application < Rails::Application
    config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
    config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
    ...
  end
end

Any other ideas?