Grow your CSS skills. Land your dream job.

Grunt and Compass

  • # May 17, 2013 at 1:18 am

    Hey Chris,

    We were having some issues with the compass image-url() helper putting in those annoying ‘/’ before all the image links and found that setting ‘relativeAssets: true’ solves it.

    When using ‘relativeAssets: true’ all the paths become relative to the Gruntfile.js and removes the ‘/’ when compiling.

    Here is our compass task within Grunt.

    compass:
    {
    development:
    {
    options:
    {
    httpPath: ”,
    relativeAssets: true,
    sassDir: ‘< %= pkg.path.src.compass %>‘,
    cssDir: ‘< %= pkg.path.development %>/< %= pkg.path.lib.styles %>‘,
    imagesDir: ‘< %= pkg.path.development %>/< %= pkg.path.lib.images %>‘,
    outputStyle: ‘expanded’
    }
    },
    deploy:
    {
    options:
    {
    httpPath: ”,
    relativeAssets: true,
    sassDir: ‘< %= pkg.path.src.compass %>‘,
    cssDir: ‘< %= pkg.path.development %>/< %= pkg.path.lib.styles %>‘,
    imagesDir: ‘< %= pkg.path.development %>/< %= pkg.path.lib.images %>‘,
      outputStyle: “compressed”
    }
    }
    },

    the ‘pkg.path…’ links are just the paths we termed within the ‘package.json’ file.

    You can also use this within your config.rb file for all those using the compass without grunt. just change ‘relativeAssets: true’ to ‘relative_assets: true’

    Hope this helps anyone else with the same issue.

    Luke.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".