Rails：Bower CSS 无法加载其字体

Question

I downloaded Metro UI and the CSS downloaded into this folder:

/vendor/assets/bower_components/metro-bootstrap/dist/css/metro-bootstrap.css

Then I included the CSS from app/assets/stylesheets/application.css.scss like so:

/*
 * require bootstrap-sass
 *= require_tree .
 *= require_self 
  require metro-bootstrap (not sure if I should include this?)
 */

@import "metro-bootstrap/dist/css/metro-bootstrap.css";

It throws an error because the CSS is trying to load fonts like this:

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

The fonts are located in this folder:

/vendor/assets/bower_components/metro-bootstrap/dist/fonts/

But this folder is not accessed by Ruby naturally, because Ruby kind of compiles all the assets in new folders, and stuff (I don't know well)

Can you help me fix this? I want it to link to the fonts with the right path, without having to modify the CSS, or copy the CSS to my asset folder, otherwise it'd kill the purpose of using Bower to install dependencies.

Answer 1

I was able to set up a demo application using the same metro theme (actually like the font, so thank you for sharing that). Let me walk you through how I set things up and see if it can work out for you or maybe you missed a step.

First I created a .bowerrc file (maybe change yours to bower_components for the directory path?):

{
  "directory": "vendor/assets/components"
}

Then bower init to create the json file.

Then bower install metro-bootstrap

application.css.scss

 *
 *= require_tree .
 *= require_self
 */

@import "metro-bootstrap/dist/css/metro-bootstrap.css";

I then started my server and the correct font rendered. Here is a good resource on setting Bower in your rails application (without the gem): http://dotwell.io/taking-advantage-of-bower-in-your-rails-4-app/ . Hopefully that gives you some ideas or helps you out.