带有图像的vendor css在concat和minify之后不可用

Question

我在angular项目中使用select2(使用yeoman)。Select2 css位于以下目录中：

bower_components/select2/select2.cssbower_components/select2/select2.png

css以以下方式使用select2.png：背景图像：url('select2x2.png')

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

bower_components/select2/d204997b.select2x2styles/034d1972.vendor.css

但问题是venodr css的select2部分正在styles目录中查找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']
}
}

感谢

Answer 1

我找不到一个好的方法来做到这一点。我所做的是使用grunt任务grunt替换来修复所有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："匹配，该部分就可以是您想要的任何内容。