Compass sprite path with WordPress

I’am trying to make compass spriting in wordpress working without success.
I’am using Grunt.js with grunt-contrib-compass (https://github.com/gruntjs/grunt-contrib-compass), grunt-contrib-clean and grunt-contrib-concat. This is my files in wp/wp-content/themes/my_theme :

/my_theme

   /assets
      / css
      / img
      / js
      / spr (for spriting generation)

   /lib
      /sass
          /bootstrap
          app.scss
          wp_the_banner.scss
      /js
      / fonts
      / less (if needed)

   style.css (wordpress css)
   Gruntfiles.js (grunt task)

/lib/sass/wp_the_banner.scss + /lib/sass/app.scss (@import bootstrap.scss + sprites.scss + theme.scss ) files are compiled in /assets/css/wp_the_banner.css + /assets/css/app.css are concatened in style.css.

Read More

Process is working fine except for compass sprite path.

this is /lib/sass/_sprite.scss

@import "compass/utilities/sprites";
@import "compass/css3";

$sprites-sprite-common-layout: smart;
@import "sprite-common/*.png";
@include all-sprite-common-sprites(true);

This is the Compass Gruntfile.js task :

sass_path: 'lib/sass',
assets_path: 'assets',
css_path: '<%= assets_path %>/css',
img_path: '<%= assets_path %>/img', 

compass: {
    dist: {
        options: {
            basePath: '',
            sassDir: '<%= sass_path %>',
            cssDir: '<%= css_path %>',
            fontsDir: '<%= font_path %>',
            imagesDir: '<%= assets_path %>/spr/',                   
            relativeAssets: false,

            outputStyle: 'expanded',
            environment: 'development',

        },              
        dev: {
            '<%= css_path %>/app.css': '<%= sass_path %>/app.scss', 
            '<%= css_path %>/wp_theme_banner.css': '<%= sass_path %>/wp_theme_banner.scss',
        },

    }

},

this is the style.css path :

background: url('/assets/spr/sprite-common-s475334e5c4.png')

what I need is just to remove / before assets:

background: url('assets/spr/sprite-common-s475334e5c4.png')

I’ve already try with httpImagesPath, or generatedImagesPath but it failed compilation. Any idea how it could be done ?

This is working with this settings,

   /my_theme
       /spr

       /assets
          /spr
          / css
          / img
          / js

    httpPath: '<%= assets_path %>',
    sassDir: '<%= sass_path %>',
    cssDir: '<%= css_path %>',
    imagesDir: 'spr/',
    relativeAssets: false,

sprite is generated in /spr and I added a grunt copy task to copy all generated sprite in /assets/spr

Related posts

Leave a Reply