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.
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