sassgruntjscompass-sassmixinsgrunt-contrib-sass

Grunt-contrib-sass doesn't create config.rb file?


I'm using Grunt-Contrib-Sass and I can't seem to find the config.rb file anywhere (if it's creating one anyways). I need it to assign a path to the http_fonts_path, because I'm using the Compass font-face mixin and it seems to be returning the fonts path "./fonts"

This is the mixin code:

@import "compass/css3";
@include font-face("Tw Cen MT", font-files("..fonts/tw_cen_mt/Tw_Cen_MT-webfont.woff", "..fonts/tw_cen_mt/Tw_Cen_MT-webfont.ttf", "..fonts/tw_cen_mt/Tw_Cen_MT-webfont.svg"), "..fonts/tw_cen_mt/Tw_Cen_MT-webfont.eot");
@include font-face("New Cicle Gordita", font-files("..fonts/new_cicle_gordita/New_Cicle_Gordita-webfont.woff", "..fonts/new_cicle_gordita/New_Cicle_Gordita-webfont.ttf", "..fonts/new_cicle_gordita/New_Cicle_Gordita-webfont.svg"), "..fonts/new_cicle_gordita/New_Cicle_Gordita-webfont.eot");

Now here's the warning I get:

WARNING: 'Tw_Cen_MT-webfont.woff' was not found (or cannot be read) in ./fonts/..fonts/tw_cen_mt
WARNING: 'Tw_Cen_MT-webfont.ttf' was not found (or cannot be read) in ./fonts/..fonts/tw_cen_mt
WARNING: 'Tw_Cen_MT-webfont.svg' was not found (or cannot be read) in ./fonts/..fonts/tw_cen_mt
WARNING: 'Tw_Cen_MT-webfont.eot' was not found (or cannot be read) in ./fonts/..fonts/tw_cen_mt
WARNING: 'Tw_Cen_MT-webfont.eot?' was not found (or cannot be read) in ./fonts/..fonts/tw_cen_mt
WARNING: 'New_Cicle_Gordita-webfont.woff' was not found (or cannot be read) in ./fonts/..fonts/new_cicle_gordita
WARNING: 'New_Cicle_Gordita-webfont.ttf' was not found (or cannot be read) in ./fonts/..fonts/new_cicle_gordita
WARNING: 'New_Cicle_Gordita-webfont.svg' was not found (or cannot be read) in ./fonts/..fonts/new_cicle_gordita
WARNING: 'New_Cicle_Gordita-webfont.eot' was not found (or cannot be read) in ./fonts/..fonts/new_cicle_gordita
WARNING: 'New_Cicle_Gordita-webfont.eot?' was not found (or cannot be read) in ./fonts/..fonts/new_cicle_gordita

Needless to say in the output in the CSS file is the same as the warning, not what I originally put in the Sass file mixin.

When I use the paths without the ".." it works fine, though, and doesn't add the "./fonts" to the url.

@include font-face("Tw Cen MT", font-files("/tw_cen_mt/Tw_Cen_MT-webfont.woff", "/tw_cen_mt/Tw_Cen_MT-webfont.ttf", "/tw_cen_mt/Tw_Cen_MT-webfont.svg"), "/tw_cen_mt/Tw_Cen_MT-webfont.eot");
@include font-face("New Cicle Gordita", font-files("/new_cicle_gordita/New_Cicle_Gordita-webfont.woff", "/new_cicle_gordita/New_Cicle_Gordita-webfont.ttf", "/new_cicle_gordita/New_Cicle_Gordita-webfont.svg"), "/new_cicle_gordita/New_Cicle_Gordita-webfont.eot");

However, that isn't the url I want to be generated in my CSS file.


Solution

  • So basically I added a config.rb file into the root of the project (where grunt is run from).

    http_fonts_path = '../fonts/'
    http_images_path = '../images/'
    
    relative_assets = false
    

    Then, I changed the font-face mixins usage like so:

    @import "compass/css3";
    @include font-face("Tw Cen MT", font-files("tw_cen_mt/Tw_Cen_MT-webfont.woff", "tw_cen_mt/Tw_Cen_MT-webfont.ttf", "tw_cen_mt/Tw_Cen_MT-webfont.svg"), "tw_cen_mt/Tw_Cen_MT-webfont.eot");
    @include font-face("New Cicle Gordita", font-files("new_cicle_gordita/New_Cicle_Gordita-webfont.woff", "new_cicle_gordita/New_Cicle_Gordita-webfont.ttf", "new_cicle_gordita/New_Cicle_Gordita-webfont.svg"), "new_cicle_gordita/New_Cicle_Gordita-webfont.eot");
    

    What I came to realize was that if the path starts with a forward slash "/" then it would be used as the path directly; however, if I were to use anything else, it would add the http_fonts_path before it; regardless of whether there's a default one or one assigned by the user.