Question

我试图在wordpress工作中使指南针spriting没有成功。我正在使用Grunt.js和grunt-contrib-compass（https://github.com/gruntjs/grunt-contrib-compass），grunt-contrib-clean和grunt-contrib-concat。这是我在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(@importbootstrap.scss + sprites.scss + theme.scss）文件在/assets/css/wp_the_banner.css + / assets中编译/css/app.css在style.css中连接。

除罗盘精灵路径外，进程正常工作。

这是/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);

这是Compass Gruntfile.js任务：

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',
        },

    }

},

这是style.css路径：

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

我需要的只是在/之前移除assets：

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

我已经尝试过使用httpImagesPath或者generateImages，但编译失败了。知道如何做到这一点？

这适用于此设置

   /my_theme
       /spr

       /assets
          /spr
          / css
          / img
          / js

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

sprite是在/ spr中生成的，我添加了一个grunt复制任务来复制/ assets / spr中所有生成的sprite

与Wordpress的指南针精灵路径

0 个答案: