Broken relative URLs to Bootstrap glyphicons in vanilla app (without sass)

[shmert]

I created a brand new yeoman app:
% yo angular:app
[?] Would you like to use Sass (with Compass)? No
[?] Would you like to include Bootstrap? Yes

Then I ran
% grunt build

The resulting build puts the bootstrap css into styles/cd367326.vendor.css

This bootstrap has an absolute reference to the glyphicons at /bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot

This URL breaks with a 404 if the project is hosted in a subdirectory on the web server.

[eddiemonge]

where is that absolute reference at?

[KevinGaudin]

Same issue here, paths to fonts still contain the original bower_components path in the built vendor.css file.

Same context:fresh app created without Sass.

[felixortegam]

Same issue here, too. No Sass, yes Bootstrap: glyphicon not working.

[KevinGaudin]

Might be linked to twbs/bootstrap#10941.

[cebor]

cssmin with root option replaces all relative paths.

you can deactivate the root option of cssmin in your Gruntfile.js

    cssmin: {
      options: {
        //root: '<%= yeoman.app %>'
      }
    },

Have look at the options of clean-css which cssmin does use: link

[KevinGaudin]

Thanks @cebor, it works. But why is it activated first ?

[cebor]

Its in since 0.8. I dont know why ...

[shmert]

My cssmin block is already commented out by default in GruntFile.js

cssmin: {
  // By default, your `index.html` <!-- Usemin Block --> will take care of
  // minification. This option is pre-configured if you do not wish to use
  // Usemin blocks.
  // dist: {
  //   files: {
  //     '<%= yeoman.dist %>/styles/main.css': [
  //       '.tmp/styles/{,*/}*.css',
  //       '<%= yeoman.app %>/styles/{,*/}*.css'
  //     ]
  //   }
  // }
},

[cebor]

@shmert: line 199-203

[ramonjd]

Sorry if I'm being obtuse, but I'm getting the same error as shmert's original post.

Tried commenting out the root param in Gruntfile.js:

    cssmin: {
      options: {
        //root: '<%= yeoman.app %>'
      }
    },

However in dist/styles/minified.css the path is still:

/bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.eot

Not a biggie, just wondering why it works for some and not me.

[cebor]

@ramonjd: Edit the $icon-font-path in your main.scss.

[ramonjd]

slaps himself on the head
Thanks @cebor
Too many hours spent looking at code ;)

[rjw57]

@cebor 3f97b80 breaks if the app is not hosted from the root of a website. (E.g. if it is hosted via github pages.) Changing /bower_components to ../bower_components and adding the font directory to the copy task fixed it for me.

[eddiemonge]

Please help to verify the fixes resolve the issues you have been having. You will need to test using the latest git code. Here are the instructions on how to do that:

• cd to a testing directory, preferable an empty one

  git clone [email protected]:yeoman/generator-angular.git
  cd generator-angular
  npm link
  cd ..
  mkdir testfonts && cd $_
  yo angular

• Test the generator with different prompts.

Let me know if you have any issues by replying here or opening a new issue.

[rjw57]

Please help to verify the fixes resolve the issues you have been having.

Seems to work here.

[e-oz]

commenting line
root: '<%= yeoman.app %>'
helped me.
I use TWBS without Compass.

thanks, @cebor

[doukasd]

Same as @Jamm. Thank you.

[eddiemonge]

this should be fixed in 0.9.0

[superghostmaster]

This issue is still prevalent in the current generator among a LOT of file paths.

This is amateur hour. This is the kind of thing that should be found before a version deployment.

For those looking for a Yeoman-based generator that actually works correctly, follow the (slightly outdated) guide over @ Meanjs.org.

[eddiemonge]

@superghostmaster please open an issue if you believe this is the case but I haven't seen anything wrong related to paths.

edit: nevermind i see you already did

[rjw57]

@eddiemonge was that #978? (For those following this issue.)