grunt heroku not including sass-bootstrap fonts

[joventuraz]

Hello, as the title says, I'm using sass-bootstrap glyphicons but they are not copied to the heroku folder using grunt heroku. I can see them fine locally but not in my heroku site.

[DaftMonk]

What version of the generator are you using?

[joventuraz]

1.0.7-pre.3

[DaftMonk]

That doesn't sound right. Use npm list -g --depth=0 to list all your global packages

[joventuraz]

You are absolutely right:

generator-angular-fullstack@1.1.1

[joventuraz]

The url in the minified css is src:url(../fonts/glyphicons-halflings-regular.eot)

The problem is the fonts folder does not exist at that location. I'm trying to modify the gruntfile to get it to copy the fonts to that folder but I'm afraid I'm still not able to do it correctly.

[DaftMonk]

I'm thinking this might be because the scss that had the correct links to the fonts got replaced by the pre-packaged minified css from bower. I'll take a look at this and get back to you shortly.

[DaftMonk]

Ok, a simple solution for now is just to manually copy the fonts folder from app\bower_components\sass-bootstrap\fonts and paste it into your app folder. This will get picked up and copied to the dist folder when you try building it for deployment.

I'll see about a more permanent solution later. Maybe we should just automatically include the fonts folder with the scaffolded app.

[joventuraz]

Thank you, it worked.

I believe a good permanent solution would be to copy the app/bower_components/sass-bootstrap/fonts folder to the correct build paths if sass-bootstrap was included in the scaffold. I'm trying to get that to work right now.

[DaftMonk]

Edit: disregard this suggestion for now, because it turns out, grunt bower-install will add back in the link rel to the bootstrap.css even after you remove it... So we'll need to figure out a way to stop that from happening. generator-angular has this same problem.

Actually a better solution would be to edit your main .scss and make sure at the top you have these lines:

$icon-font-path: "/bower_components/sass-bootstrap/fonts/";

@import 'sass-bootstrap/lib/bootstrap';

And then removing the stylesheet reference to the bootstrap css from your index.html.

I took out the @import statement in a previous version because the bootstrap css was being included twice, and it was between removing the link rel in the index file or the scss import. It turns out that the link rel to the bootstrap css isn't as good as the scss import, because you can't edit bootstrap variables, like we do with the $icon-font-path.

That said, what you did will work fine as long as you don't need to edit bootstrap variables.

[joventuraz]

Thank you for the clarification and for this great generator, I hope I can start contributing soon 👍

[ArneComoyo]

Hey, had this same problem. In my case it had nothing to do with neither Heroku nor the generator, but with the .gitignore file. It ignored bower_components, also the one in the dist/ folder. I added the rule !dist/bower_components and now the files were pushed to Heroku. No more 404.