vendor css with images not available after concat and minify

Question

I am using select2 in angular project (using yeoman). Select2 css is in the following dir:

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

The css is using the select2.png in the following way: background-image: url('select2x2.png')

After running concat and minify i have the following structure:

bower_components/select2/d204997b.select2x2 styles/034d1972.vendor.css

But the problem is that the select2 part of the venodr css is looking for the d204997b.select2x2 in the styles directory.

This is my part of my GruntJS file:

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

Thanks

I found out the grunt-cdnify package which does extactly this [https://www.npmjs.org/package/grunt-cdnify](https://www.npmjs.org/package/grunt-cdnify) — Roi Ezra, Oct 31 '14 at 17:17
Roi -- You should make your solution an Answer and mark it Correct. The "cdnify" package worked perfectly for me -- thank you! — Stephen R, Jul 06 '17 at 19:17

score 3 · Answer 1 · answered Feb 27 '14 at 19:14

I could not find a good way to do this. What i did was use a grunt task grunt-replace to fix all the css image paths.

The grunt task

/**
 * 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\''
            }
        ]
    }
}

I also copied all of the select2 images into a folder "img". That part can be whatever you want as long as the task "to:" matches.

vendor css with images not available after concat and minify

1 Answers1