Search code examples
sasscompass-sass

config.rb for SASS fonts directory path adding slash


I have set config.rb file as below

http_path = "/"
css_dir = ""
sass_dir = "sass"
images_dir = "images"
fonts_dir = 'fonts'
fonts_path = ""
javascripts_dir = "js"

Here is my directory path

In the project root

style.css fonts/my-fonts sass/style.sass images/my-all-images

Now when I am trying to add fonts using font-face it is adding leading slash for font directory like /fonts but I want it only fonts

SASS

+font-face("Ubuntu", font-files("ubuntu/ubuntu-r-webfont.eot", "ubuntu/ubuntu-r-webfont.eot?#iefix", "ubuntu/ubuntu-r-webfont.woff", "ubuntu/ubuntu-r-webfont.ttf", "ubuntu/ubuntu-r-webfont.svg#ubunturegular"))

Generating CSS

@font-face {
  font-family: "Ubuntu";
  src: url('/fonts/ubuntu/ubuntu-r-webfont.eot') format('embedded-opentype'), url('/fonts/ubuntu/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/ubuntu/ubuntu-r-webfont.woff') format('woff'), url('/fonts/ubuntu/ubuntu-r-webfont.ttf') format('truetype'), url('/fonts/ubuntu/ubuntu-r-webfont.svg#ubunturegular') format('svg');
}

Solution

  • You can set relative_assets = true right after path setting in config file.

    Here is a sample config example to work on relative assets.

    # Set this to the root of your project when deployed:
    http_path = "/"
    css_dir = "app/css"
    sass_dir = "app/css/sass"
    images_dir = "app/img"
    javascripts_dir = "app/js"
    fonts_dir = "app/css/fonts"
    
    output_style = :nested
    environment = :development
    
    relative_assets = true