4

我select2在 Angular 项目中使用（使用 yeoman）。Select2 css 位于以下目录中：

bower_components/select2/select2.css bower_components/select2/select2.png

css 以下列方式使用 select2.png： background-image: url('select2x2.png')

运行 concat 和 minify 后，我有以下结构：

bower_components/select2/d204997b.select2x2 样式/034d1972.vendor.css

但问题是 venodr css 的 select2 部分正在样式目录中寻找 d204997b.select2x2 。

这是我的 GruntJS 文件的一部分：

rev: {
      dist: {
        files: {
          src: [
            '<%= yeoman.dist %>/scripts/{,*/}*.js',
            '<%= yeoman.dist %>/styles/{,*/}*.css',
            '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            '<%= yeoman.dist %>/bower_components/select2/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            '<%= yeoman.dist %>/styles/fonts/*'
          ]
        }
      }
    },
useminPrepare: {
  html: '<%= yeoman.app %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>'
  }
},

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>' ,'<%= yeoman.dist %>/images' , '<%= yeoman.dist %>/bower_components/select2']
  }
}

谢谢

4

1 回答 1

3

我找不到这样做的好方法。我所做的是使用 grunt 任务 grunt-replace 来修复所有 css 图像路径。

咕噜咕噜的任务

/**
 * Replaces image paths in CSS to match ../img. Select2 is the only css file this is needed for so far.
 * Others can be added.
 */
replace: {
    build: {
        src: ['<%= build %>/assets/lib/css/select2.css'],
        overwrite: true,
        replacements: [
            {
                from: /url\('(?!\.)/g,
                to: 'url(\'../img/'
            },
            {
                from: /url\((?!\')/g,
                to: 'url(\'../img/'
            },
            {
                from: /..\/images\//g,
                to: '../img/'
            },
            {
                from: /(png|gif|jpg)(?=\))/g,
                to: '$1\''
            }
        ]
    }
}

我还将所有 select2 图像复制到文件夹“img”中。只要任务“to：”匹配，该部分可以是您想要的任何内容。

于 2014-02-27T19:14:06.660 回答