CODEWITHSUNDEEP
gruntjsyeomanbrowserifycompass
Amir
Amir

Reputation: 37

Grunt build setting correct path for bootstrap icons

So i have been trying to build a webapp at work using yeoman, grunt, browserify and sass bootstrap(with compass). I have issues with the finished dist CSS not pointing to the right path, so my glyph-icons are not showing.

This is the error i'm getting:

http://localhost:9000/styles/.tmp/bower_components/sass-bootstrap/fonts/glyphicons-halflings-regular.woff Failed to load resource: the server responded with a status of 404 (Not Found)

For some reason it is looking for the icons under /styles/.tmp/, whereas it should really look for the icons directly under bower_components such as:

http://localhost:9000/bower_components/sass-bootstrap/fonts/glyphicons-halflings-regular.woff

This does not happen when i run grunt serve, but only when i run grunt serve:dist.

My style.scss:

$fa-font-path: 'fonts';
$icon-font-path: "../bower_components/sass-bootstrap/fonts/";
@import '../bower_components/sass-bootstrap/lib/bootstrap';

.bannerBackground {
background-image: url("../images/Header.png");
background-repeat: repeat;
width: 100%;
height: 148px;

My Gruntfile.js compass part:

compass: {
        options: {
            sassDir: '<%= yeoman.app %>/styles',
            cssDir: '.tmp/styles',
            generatedImagesDir: '.tmp/images/generated',
            imagesDir: '<%= yeoman.app %>/images',
            javascriptsDir: '/js',
            fontsDir: '<%= yeoman.app %>/styles/fonts',
            importPath: '<%= yeoman.app %>/bower_components',
            httpImagesPath: '/images',
            httpGeneratedImagesPath: '/images/generated',
            httpFontsPath: '/styles/fonts',
            relativeAssets: false,
            assetCacheBuster: false
        },
        dist: {
            options: {
                generatedImagesDir: '<%= yeoman.dist %>/images/generated'
            }
        },
        server: {
            options: {
                debugInfo: true
            }
        }
    }

My Gruntfile.js cssmin part:

cssmin: {
        dist: {
            options: {
                noRebase: true
            },
            files: {
                '<%= yeoman.dist %>/styles/style.css': [
                    '.tmp/styles/{,*/}*.css'
                ]
            }
        }
    }

I'm not really sure what i am doing wrong here, but i had the same problem with images and as you can see from .bannerBackground in my scss file i change url to image-url which fixed the issue. However i can not seem to be able to do the same for $icon-font-path which i suspect is where the issue is.

Upvotes: 1

Views: 982

Answers (1)

Amir
Amir

Reputation: 37

Well, i didn't get any response here, but to help others that might have this issue, i solved it by doing as such:

  1. Used "image-url" helped function instead of just "url"

$fa-font-path: 'fonts';
$icon-font-path: "../bower_components/sass-bootstrap/fonts/";
@import '../bower_components/sass-bootstrap/lib/bootstrap';
@import "bamSummary";
@import "bamDetails";

.bannerBackground {
  background-image: image-url("../images/Header.png");
  background-repeat: repeat;
  width: 100%;
  height: 148px;
  margin-bottom: 10px;
}

.bannerPattern {
  background-image: image-url("../images/HB_pattern.png");
  background-repeat: no-repeat;
  background-position: top right;
  width: 100%;
  height: 100%;

Upvotes: 1

Related Questions