Grunt Build Incorrectly Optimizing CSS Url

179 Views Asked by At

I'm using Backbone Boilerplate and I've added the bower Ratchet 2.* dependency, then I'm importing it in my styles/index.css file from it's bower origin folder:

@import "../../vendor/bower/ratchet/dist/css/ratchet.css";

This grabs the file correctly, but for some reason when compressing it's changing the url in my @font-face selector.

The original selector looks like this:

@font-face {
  font-family: Ratchicons;
  font-style: normal;
  font-weight: normal;
  src: url("app/fonts/ratchicons.eot");
  src: url("app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"), 
       url("app/fonts/ratchicons.woff") format("woff"), 
       url("app/fonts/ratchicons.ttf") format("truetype"), 
       url("app/fonts/ratchicons.svg#svgFontName") format("svg");

After running the grunt task my new optimized style.css for this selector looks like this:

@font-face {
    font-family: Ratchicons; font-style: normal; font-weight: normal; 
    src: url("/app/img/vendor/bower/ratchet/dist/css/app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"), 
         url("app/fonts/ratchicons.woff") format("woff"), 
         url("app/fonts/ratchicons.ttf") format("truetype"), 
         url("app/fonts/ratchicons.svg#svgFontName") format("svg");
}

(line breaks were added for display here)

You'll notice that the entire first line:

src: url("app/fonts/ratchicons.eot");

has been completely stripped out, and the next line should be:

src: url("app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),

but has become:

src: url("/app/img/vendor/bower/ratchet/dist/css/app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"), 

I can't understand or explain why this is happening, but I need it resolved.

I checked the styles section of my gruntfile and it looks like so:

styles: {
  // Out the concatenated contents of the following styles into the below
  // development file path.
  "dist/styles.css": {
    // Point this to where your `index.css` file is location.
    src: "app/styles/index.css",

    // The relative path to use for the @imports.
    paths: ["app/styles"],

    // Rewrite image paths during release to be relative to the `img`
    // directory.
    forceRelative: "/app/img/"
  }
},

I'm assuming that for some reason the style optimizer is adding the forceRelative url to an original url of ../fonts/fontfile but I can't explain why or what to do.

Help appreciated.

0

There are 0 best solutions below