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?

[roalcantara]

Hi @glebm,

Seems to me that the problem is raised form here:

_glyphicons.scss

//= depend_on_asset "bootstrap/glyphicons-halflings-regular.eot"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.svg"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.ttf"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.woff"

I've try to change it to

//= depend_on_asset '#{$icon-font-path}#{$icon-font-name}.eot'
//= depend_on_asset '#{$icon-font-path}#{$icon-font-name}.svg'
...

but it doesn't work, though.

Any ideas?

[glebm]

Perhaps it will work with a relative path?

[roalcantara]

It may work. However, I was trying not to modify the original bootstrap files. Do you happen to know if there is a way that I can override those paths without change the originals files?

[glebm]

The basic issue is that bootstap-sass-official/vendor is not in Sass.load_paths. You can add it there and the problem should go away. However, if it just works with a relative path instead (../..), we can modify the code here.

[glebm]

By the way, unfortunately, our tests don't fail even if I set depend_on value to mumbo-jumbo. Looks like precompile (used in bootstrap-sass rails test) does not check this directive at all.

[roalcantara]

Hi @glebm,

Firstly, thank you so much for your help.

Apparently, the Sprockets error was solved adding the /fonts to the assets.paths in application.rb:

  class Application < Rails::Application
    config.active_record.default_timezone = :local

    config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
    config.assets.paths << Rails.root.join('vendor', 'assets', 'bower')
    config.assets.paths << Rails.root.join('vendor', 'assets', 'bower', 'bootstrap-sass-official', 'vendor', 'assets', 'fonts')

    config.assets.precompile.push(Proc.new do |path|
      File.extname(path).in? [
        '.png',  '.gif', '.jpg', '.jpeg', '.svg', # Images
        '.eot',  '.otf', '.svc', '.woff', '.ttf', # Fonts
      ]
    end)

    config.assets.initialize_on_precompile = false
    config.serve_static_assets = true
  end

However, after the deploy on Heroku, the file name still without the fingerprint, check it out:

To try solve the problem, what about create the file
bootstrap-sass-official/vendor/assets/stylesheets/_bootstrap-sprockets.scss:

@function twbs-font-path($path) {
  @return font_path($path);
}

@function twbs-image-path($file) {
  @return image_path($file);
}

Thus, it would be possible adapt the application.css.scss to:

/*
 *= require_tree .
 *= require_self
 */

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

What do u think?

If it works and you agree, can I send a pull request for this issue? :)

[roalcantara]

Hi @glebm,

Another thing that I had to change to bootstrap-sass-official works was:
/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js to:

//= require ./bootstrap/affix
//= require ./bootstrap/alert
//= require ./bootstrap/button
//= require ./bootstrap/carousel
//= require ./bootstrap/collapse
//= require ./bootstrap/dropdown
//= require ./bootstrap/tab
//= require ./bootstrap/transition
//= require ./bootstrap/scrollspy
//= require ./bootstrap/modal
//= require ./bootstrap/tooltip
//= require ./bootstrap/popover

Btw, my application.js is:

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

[roalcantara]

Hi @glebm,

Another thing that I had to do in order to bootstrap-sass work properly via Bower in a Rails 4.1 was change the bower.json to

{
  "name": "bootstrap-sass",
  "version": "3.1.1",
  "homepage": "https://github.com/twbs/bootstrap-sass",
  "authors": [
    "Thomas McDonald",
    "Tristan Harward",
    "Peter Gumeson",
    "Gleb Mazovetskiy"
  ],
  "description": "bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.",
  "main": [
    "vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
    "vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
    "vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
    "vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
    "vendor/assets/stylesheets/bootstrap.scss",
    "vendor/assets/javascripts/bootstrap.js"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "lib",
    "tasks",
    "templates",
    "test",
    "*.gemspec",
    "Rakefile",
    "Gemfile"
  ]
}

Without this adjust, only the affix.js had been loaded.

What do you think?

[glebm]

Unfortunately, this would only work with Sprockets / Mincer. There is no universal way to set Bower's main yet

[glebm]

I've changed //= require paths to relative in 2dc2274

[roalcantara]

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

Now, I've made the checkout of this commit and the system has broken for 2 reasons:

1 - In order to the glyphicons work with Sprockets, apparently, the old path was correct.
It means, instead of:

//= depend_on_asset "./../../fonts/bootstrap/glyphicons-halflings-regular.eot"
//= depend_on_asset "./../../fonts/bootstrap/glyphicons-halflings-regular.svg"
//= depend_on_asset "./../../fonts/bootstrap/glyphicons-halflings-regular.ttf"
//= depend_on_asset "./../../fonts/bootstrap/glyphicons-halflings-regular.woff"

It must be:

//= depend_on_asset "bootstrap/glyphicons-halflings-regular.eot"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.svg"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.ttf"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.woff"

2 - Having the bower.json get back to the original, the Bootstrap's JavaScript stopped being loaded again, take a look:

Have you got any suggestions of how should I be able to load all JavaScripts properly in my environment?

This is my application.js:

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

Thank you so much for your help one more time.

[glebm]

I've made changes so it should work now. The file _bootstrap-sprockets.scss as you suggest already exists, but has not been reported working yet.

[roalcantara]

Hi @glebm, it's almost there.

I've checked out the commit e2e7020 and the _bootstrap-sprockets.scss works perfectly. :)

However, now I'm getting the following error:

Sprockets::Rails::Helper::DependencyError - Asset depends on 'bootstrap/glyphicons-halflings-regular.eot' to generate properly but has not declared the dependency
Please add: `//= depend_on_asset "bootstrap/glyphicons-halflings-regular.eot"` to '/Users/roalcantara/Documents/caesars/app/assets/stylesheets/application.css.scss'

It seems to me that instead of _depend_on_

//= depend_on "bootstrap/glyphicons-halflings-regular.eot"
//= depend_on "bootstrap/glyphicons-halflings-regular.svg"
//= depend_on "bootstrap/glyphicons-halflings-regular.ttf"
//= depend_on "bootstrap/glyphicons-halflings-regular.woff"

It should be _depend_on_asset_:

//= depend_on_asset "bootstrap/glyphicons-halflings-regular.eot"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.svg"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.ttf"
//= depend_on_asset "bootstrap/glyphicons-halflings-regular.woff"

Apart from this, apparently only the file affix.js is being loaded. Since we cannot change bower.js, do you have any ideas of what should I do in order to load the JavaScript files properly?

Thank you so much for your time and consideration.

[roalcantara]

Hi @glebm,

Apparently the JS are loading properly. It seems to me that it was just a cache problem - my bad. =\

However, apparently, the file glyphicons.scss still must be changed from _depend_on to _depend_on_asset_ in order to Sprockets work properly.

[roalcantara]

Hi @glebm,

I've changed the dependency to bootstrap (instead of the bootstrap-sass):

bower.json

{
  "dependencies": {
    "jquery": "~2.1.1",
    "jquery-ujs": "*",
    "bootstrap": "~3.1.1",
  }
}

and overrided the path for the fonts:

application.scss:

//= depend_on_asset "bootstrap/dist/fonts/glyphicons-halflings-regular.eot"
//= depend_on_asset "bootstrap/dist/fonts/glyphicons-halflings-regular.woff"
//= depend_on_asset "bootstrap/dist/fonts/glyphicons-halflings-regular.ttf"
//= depend_on_asset "bootstrap/dist/fonts/glyphicons-halflings-regular.svg"
/*
 *= require_self
 *= require_tree .
 */
@import "bootstrap/dist/css/bootstrap";

/* Override Bootstrap 3 font locations */
@font-face {
font-family: 'Glyphicons Halflings';
src: url(font-path('bootstrap/dist/fonts/glyphicons-halflings-regular.eot'));
src: url(font-path('bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'),
     url(font-path('bootstrap/dist/fonts/glyphicons-halflings-regular.woff')) format('woff'),
     url(font-path('bootstrap/dist/fonts/glyphicons-halflings-regular.ttf')) format('truetype'),
     url(font-path('bootstrap/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
}

and now everything is working properly.

The only (minor) problem is that, apparently, the browser is requesting the old path and the new path:

However, the fonts are shown properly in all browsers - and this is what's matters most. :)

Anyway, thank you so much for your help.

[glebm]

It should be depend_on, as there is an open issue with depend_on_asset.

From Sprockets documentation:

depend_on allows you to state a dependency on a file without including it.

This is used for caching purposes. Any changes made to the dependency file with invalidate the cache of the source file.

---

depend_on_asset allows you to state an asset dependency without including it.

This is used for caching purposes. Any changes that would invalidate the dependency asset will invalidate the source file. Unlike depend_on, this will include recursively include the target asset's dependencies.

[glebm]

Released in v3.2.0

[bcardiff]

It seems that the issue is still present. I'm trying for first time bower-rails to use bootstrap-sas

With
rails (4.1.4)
bower-rails (0.7.3)

Bowerfile:

asset 'bootstrap-sass-official'

application.css:

*= require bootstrap-sass-official

I got the couldn't find file 'bootstrap/glyphicons-halflings-regular.eot' error unless I specified the full path on _glyphicons.scss as

//= depend_on "bootstrap-sass-official/assets/fonts/bootstrap/glyphicons-halflings-regular.eot"

[kafaichoi]

I solved it by adding the following to config/application.rb:

config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","fonts")

[glebm]

It appears our troubles have been resolved by Sprockets v2.1.4, which no longer needs depend_on in this case. I've updated branch next, see the commit above for details. Let me know if this works.

[wkirby]

I was running into this same issue today, and solved it by adding the following to my middleman config.rb:

# Bower Support
after_configuration do
  @bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))

  # Fonts are stupid
  Dir.glob(File.join("#{root}", @bower_config["directory"], "**", "fonts")) do |f|
    sprockets.append_path f
  end

  sprockets.append_path File.join "#{root}", @bower_config["directory"]
end

This reads my .bowerrc file to find where I'm putting vendor files, adding that directory to sprockets, and then globbing for any fonts directories and adding those as well.

For reference, my SCSS file looks like this:

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

Maybe I'm wrong, but it seems weird that sprockets needs to know about both the bower directory and any specific font directories. Can someone explain why that's the case?

[glebm]

@wkirby Unfortunately, relative path resolution in font-url does not work with paths relative to the partial in Sass + Sprockets. As an alternative to modifying the load path, you can try changing $icon-font-path:

$icon-font-path: "bootstrap-sass-official/assets/fonts/bootstrap/";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";

[Olgagr]

It doesn't work for me. I still see an error:

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

The only way it works for me is add the path to icons in application.rb:

config.assets.paths << Rails.root.join('vendor', 'assets', 'components', 'bootstrap-sass-official', 'assets', 'fonts')

[soosap]

$icon-font-path: "../fonts/bootstrap";

worked for me!