Giter VIP home page Giter VIP logo

Comments (8)

asgeo1 avatar asgeo1 commented on September 15, 2024

Agree, this is still an issue - not sure why it was closed.

I've just started with yeoman, and this is not a good experience to have straight up. I'm still not sure what the solution is, even after having looked at the other threads.

from generator-webapp_deprecated.

kevva avatar kevva commented on September 15, 2024

It's because the Bootstrap lib references ../img/glyphicons-halflings.png. One solution is to manually move the images in app/components/sass-bootstrap/img to app/images and then paste this in your main.scss before the Bootstrap import.

$iconSpritePath: "../images/glyphicons-halflings.png";
$iconWhiteSpritePath: "../images/glyphicons-halflings-white.png";

from generator-webapp_deprecated.

shanemaiolo avatar shanemaiolo commented on September 15, 2024

It's similar to this, Yeoman forgets to bundle font-awesome and the sprite images for bootstrap yeoman/yeoman#419

While its not a huge stretch to manually copy resources, there seems to be a few people who would rather not.

from generator-webapp_deprecated.

sindresorhus avatar sindresorhus commented on September 15, 2024

@shanemaiolo I agree, we should try to find a solution to that.

@kevva since it's very popular we should try to find a workaround. Either in code or as a fallback with docs. If you have any thoughts about how we can resolve this, can you add a comment in yeoman/yeoman#419

from generator-webapp_deprecated.

kevva avatar kevva commented on September 15, 2024

@shanemaiolo, FontAwesome isn't a part of jlong/sass-twitter-bootstrap, open an issue over there. We should be able to handle the sprites for you though.

@sindresorhus, the solution above works. To fix it we either need to bundle the sprites or trigger bower install automatically (#32) so we can copy over the images from components/sass-bootstrap.

from generator-webapp_deprecated.

iokill avatar iokill commented on September 15, 2024

Hi all!

AFAIK the fix by @kevva causes problems when there is a change to the glyphicons files of sass-bootstrap (e.g new icons added) and the user updates sass-bootstrap using bower. So it would be great to have a way of syncing the changes from app/bower_components/sass-bootstrap/img/ to app/images/.

How about using the copy task to sync such files on every grunt build, grunt server etc.? This would also make it easy to solve the path-issue with font-awesome. The only problem I see with this approach is that we would overwrite any user-modifications to such files. But we could always add a check for that if it's required...

from generator-webapp_deprecated.

olizilla avatar olizilla commented on September 15, 2024

This is still a problem when Sass with Compass isn't included. We can't set the $icon-font-path as we only have the .css file.

After usemin has had it's way with it the font url in the bootstrap css are like 'url(../fonts/glyphicons-halflings-regular.ttf)' but the copy:dist task doesn't flatten the file path so the fonts are copied to /dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf.

So rather than setting the $icon-font-path for the Sass version, perhaps it would be better to copy the fonts to /dist/fonts in both cases. As a quick workaround I have included:

copy: {
...
      glyphicons: {
        files:[
          {
            expand:true,
            flatten:true,
            src: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/*',
            dest: '<%= yeoman.dist %>/fonts/'
          }
        ]
      }
}

Happy to tidy up into a PR if the solution sounds reasonable.

from generator-webapp_deprecated.

nikhilbangar avatar nikhilbangar commented on September 15, 2024

To overcome this issue just copy paste fonts folder from bower_component/bootstrap/ to the dist/ directory.

Hope this would help...

from generator-webapp_deprecated.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.