"usemin:css" doesn't generate correct image paths for relative urls

[taktran]

I've generated a project using yeoman, and I have the following scss file which references an image using relative paths:

.compare {
  background-image: url("../img/insulin-v2.jpg");
}

However, it does not get properly converted to the correct ../img/[random-hash].insulin-v2.jpg format.

If I change it to an absolute path, it does convert it correctly, ie,

.compare {
  background-image: url("/img/insulin-v2.jpg");
}

...generates this in the yeoman build output

Running "usemin:css" (usemin) task

usemin:css - styles/4dcce6a3.styles.css
>> img/insulin-v2.jpg
was url("/img/insulin-v2.jpg")
now url("/img/46ee3ef4.insulin-v2.jpg")

(the previous relative url version doesn't produce any output after Running "usemin:css" (usemin) task)

I can't use absolute paths because I need to host somewhere where it is not the root directory. Any ideas?

---

My folder structure is

./app:
    index.html
./app/img
    insulin-v2.jpg
./app/sass:
    _grid.scss
    _normalize.scss 
    styles.scss

Gruntfile.js build settings are

// Build configuration
// -------------------

// the staging directory used during the process
staging: 'temp',
// final build output
output: 'dist',

mkdirs: {
  staging: 'app/'
},

// Below, all paths are relative to the staging directory, which is a copy
// of the app/ directory. Any .gitignore, .ignore and .buildignore file
// that might appear in the app/ tree are used to ignore these values
// during the copy process.

// concat style/**/*.css files, inline @import, output a single minified css
css: {
  'styles/styles.css': ['styles/**/*.css']
},

// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
  js: 'scripts/**/*.js',
  css: 'styles/**/*.css',
  img: 'img/**'
},

// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
  html: 'index.html'
},

// update references in HTML/CSS to revved files
usemin: {
  html: ['**/*.html'],
  css: ['**/*.css']
},

// HTML minification
html: {
  files: ['**/*.html']
},

// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
  dist: '<config:rev.img>'
},

// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
  // no minification, is done by the min task
  optimize: 'none',
  baseUrl: './scripts',
  wrap: true,
  name: 'main'
}

---

This could be related to #419, but I tried the .compass.rb file addition and the relative_assets: true, but they both didn't work.

[taktran]

Also maybe worth noting is that the rev:img task generates the correct hashed file with the relative or absolute urls ie, the output of build gives

Running "rev:img" (rev) task
img/insulin-v2.jpg >> 46ee3ef4.insulin-v2.jpg

[sleeper]

Mainly:

1. We're moving usemin out of yeoman base in yeoman/grunt-contrib, and this case must be treated
2. This specific issue has also been treated in usemin at a commit which is not part of 0.9.6 (i.e. 0.9.6 is "only" 0.9.5 plus 1 commit)

[taktran]

So anything I can do right now to fix the issue? Should I use the master branch of yeoman or something?

[sleeper]

No, the master branch of usemin is currently not working.
I would say that you can try using the commit 50dd2ba.

To do this you'll have to clone yeoman, checkout this particular commit, and change the version of yeoman in cli/package.json to something higher than 0.9.6 (to avoid updater kicking in ;))

[taktran]

Great, thanks!

I've branched it at https://github.com/taktran/yeoman/tree/usemin-patch.

Couldn't figure out how to npm install from a particular branch on github, but downloading it and installing from the cli folder worked.

[emrecamasuvi]

Thanks you guys!
I came here from this stackoverflow article
For newcomers to solve the issue, follow these steps:

sudo npm uninstall yeoman -g
git clone git://github.com/taktran/yeoman.git
cd yeoman/cli
sudo npm install -g
sudo npm link

[ringvold]

When will this be fixed in yeoman? It seems like something people need to have fixed.

[emrecamasuvi]

@haraldringvold i guess they will fix this in yeoman 1.0, not sure though.

[sleeper]

Should be fixed by yeoman/grunt-usemin

[olimungo]

I had the same issue (with yeoman1.0.0-beta.4 and grunt 0.4.1) and solved it by adding basedir in the options of my Gruntfile.js

    usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
            dirs: ['<%= yeoman.dist %>'],
            basedir: ['<%= yeoman.dist %>']
        }
    },

[ghost]

I had the same issue and I solved it like @olimungo but url image in css is not correct :(

[olimungo]

@dondinh : I've got something like this in my CSS:

background-image: url(../images/ui/logo_40.png);

It gets converted like this :

background-image:url(../images/ui/47378ff3.logo_40.png)

And I can find the following file in the "images" folder :

47378ff3.logo_40.png

[ghost]

@olimungo : My issue is solved successful. Thank you very much

[josephspens]

I attempted @olimungo's solution above:

usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
            dirs: ['<%= yeoman.dist %>'],
            basedir: ['<%= yeoman.dist %>']
        }
    },

And received the following error:

$ grunt usemin:html --stack
Running "usemin:html" (usemin) task

Processing as HTML - dist/404.html
Warning: Arguments to path.resolve must be strings Use --force to continue.
TypeError: Arguments to path.resolve must be strings
    at Object.exports.resolve (path.js:313:15)
    at Object.exports.relative (path.js:371:18)
    at new module.exports (/Users/joseph/Development/josephspens.github.io/node_modules/grunt-usemin/lib/htmlprocessor.js:148:27)
    at /Users/joseph/Development/josephspens.github.io/node_modules/grunt-usemin/tasks/usemin.js:102:20
    at Array.forEach (native)
    at /Users/joseph/Development/josephspens.github.io/node_modules/grunt-usemin/tasks/usemin.js:87:34
    at Array.forEach (native)
    at Object.<anonymous> (/Users/joseph/Development/josephspens.github.io/node_modules/grunt-usemin/tasks/usemin.js:84:16)
    at Object.<anonymous> (/Users/joseph/Development/josephspens.github.io/node_modules/grunt/lib/grunt/task.js:258:15)
    at Object.thisTask.fn (/Users/joseph/Development/josephspens.github.io/node_modules/grunt/lib/grunt/task.js:78:16)

Aborted due to warnings.

Elapsed time
usemin:html  538ms
Total        538ms

After doing some research, this results from an issue with path.join(), and everyone's suggestion ends up resulting in reinstalling node and grunt and making sure everything is updated and pointing to the right location. I did all that without success. It turns out the solution is much simpler, remove the baseDir string from the array:

usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
            dirs: ['<%= yeoman.dist %>'],
            basedir: '<%= yeoman.dist %>'
        }
    },

According to the usemin docs, baseDir is supposed to be a string anyways.

[gsklee]

I'm using v0.4.3 of generator-webapp and still experiencing the same issue. The default template is using relative paths everywhere and seems to suggest a convention but it leads to this buggy behavior quickly.

Judging from the discussions above - is this an issue related with usemin?

[marcalj]

For anyone having troubles with this again, like me, I solved the issue appending "/images" path to assetsDir config:

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

[joemcgill]

Thanks @marcalj,

Was having this issue tonight and adding the /images folder to the assetsDir config worked perfectly.

[FrankFang]

Thanks @josephspens ! It works!

[FrankFang]

Thanks for @marcalj too !

[marcalj]

For files inside JS you have to use manual replacement right now (issue opened):

    usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      js: '<%= yeoman.dist %>/scripts/*.js',
      options: {
        assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
        patterns: {
          js: [[/(EuropeanUnion-24\.png)/, 'Replacing reference to EuropeanUnion-24.png']] // FIXME While usemin won't have full support for revved files we have to put all references manually here
        }
      }
    },

[marcalj]

You're are welcome :)

[gsklee]

Cool @marcalj! About the "files inside JS" issue - is it a usemin bug? What's the issue number?

[marcalj]

@gsklee Here: yeoman/grunt-usemin#235

Make sure to use multiple regex to catch repeated filenames: yeoman/grunt-usemin#244 (comment)

[gsklee]

Cool, thanks @marcalj!

[mkavrukova]

Thanks @marcalj

[npatten]

Thanks @marcalj, that worked like a charm!

[uogood]

Thanks @marcalj!

[marcalj]

@tastycode Hey, thanks for your research. I use the copy task for this problem for FontAwesome, not sure which is the best solution.

NOTE: This goes to copy.dist.files array.

{
            expand: true,
            cwd: '<%= yeoman.app %>/bower_components/ionicons/fonts/',
            src: ['**'],
            dest: '<%= yeoman.dist %>/fonts/' // Ionicons copy hack
        }

With this approach you don't get font revved and minified, what about with your solution?

Thanks!

[tastycode]

My solution gets revved (not sure if minified).. Honestly, if you solution works. I would rather just use it, i had to make so many changes everywhere to get mine to work. I don't need revving on these fonts.

[davepoon]

Use the copy task to copy the fonts, and remove or comment out the line of code for font renaming in rev task, this should fix the font not found issue.

rev: {
            dist: {
                files: {
                    src: [
                        '<%= yeoman.dist %>/scripts/{,*/}*.js',
                        '<%= yeoman.dist %>/styles/{,*/}*.css',
                        '<%= yeoman.dist %>/images/{,*/}*.{gif,jpeg,jpg,png,webp}'
                       //'<%= yeoman.dist %>/styles/fonts/{,*/}*.*'
                    ]
                }
            }
        },

copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>',
            dest: '<%= yeoman.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.webp',
                '{,*/}*.html',
                'styles/fonts/{,*/}*.*'
            ]
        }

[derekdata]

Thanks @marcalj !

[xipengyang]

Thanks @marcalj!

[elegantcoder]

Thanks @marcalj !

[iheanyi]

Another fix that I encounter was that I was getting messed up by relative paths within my URL link ('../../images'). If you have it in the format in parentheses, change it to ('/images') and that should fix a lot of issues.

[Munter]

@iheanyi I would call that a bug. It's well defined that urls can relative from the CSS that include them. There is no excuse not to support that

[gintsgints]

Please fix this.

[alexanderjohn]

This is still an issue using yoeman 4.4, grunt contrib usemin 2.3 and the angular generator

[Gamatora]

The original issue is old but I just had this problem, with the latest version of all components.

I tried lot of config & setup (assetDirs, etc) that I gathered around on Github issues / stackoverflow, but nothing did the trick for my problem.

The problem was like the original post, url(../images/bla.ext) was rewrote url(images/bla.ext) during cssmin.

The problem was trusting the yeoman configuration template. I just removed the "root" configuration, and it solved everything.

So from:
// The following *-min tasks produce minified files in the dist folder
cssmin: {
options: {
root: '<%= yeoman.app %>'
}
},

Set:
// The following *-min tasks produce minified files in the dist folder
cssmin: {
options: {
}
}

6 hours lost, made my day though /o/

[juanmhidalgo]

Thanks @Gamatora it works!

[terjekrogstad]

Nice one @Gamatora . Resolved my generator-angular-phonegap headache :)

[thalesfsp]

Solution:

• From filerev, remove '<%= yeoman.dist %>/images/{,/}.{png,jpg,jpeg,gif,webp,svg}' in src;
• From usemin, remove '<%= yeoman.dist %>/images' in options -> assetsDirs;

[johnsonw]

I was having an issue with this as well and the assetsDirs fixed it for me:

usemin: {
  html: ['target/public/index.html'],
  css: ['target/public/assets/*.css'],
  options: {
    assetsDirs: ['target/public', 'target/public/assets']
  }
}

[Ouadie]

V 1.3.3 and still have the background:url('.tmp/images/bg.png') instead of background:url('../images/bg.png') using the default gruntfile.js for angular-generator

[bmatto]

I'm having this issue as well @Ouadie - did you find any work around?

[Ouadie]

For now I'm using $img-path:'../../../images;' instead of $img-path:'../images'; and it works for grunt serve and grunt build

[bmatto]

Thank you kind sir.

[viz]

just encountered this problem in a project created very recently using yeoman 1.4.8
I thought that I should post how I resolved it here for the benefit of others. I went to try @marcalj 's solution above, but the default config generated by yeoman looked like it was already doing that.

There was a subtle difference though. The default looked like:

usemin: {
  html: ['<%= yeoman.dist %>/client/!(bower_components){,*/}*.html'],
  css: ['<%= yeoman.dist %>/client/!(bower_components){,*/}*.css'],
  js: ['<%= yeoman.dist %>/client/!(bower_components){,*/}*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>/client',
      '<%= yeoman.dist %>/client/assets/images'
    ],

which didn't work (the asset reference in the stylesheet wasn't updated by usemin).

To get it working, I added the assets directory into the assetsDirs array:

usemin: {
  html: ['<%= yeoman.dist %>/client/!(bower_components){,*/}*.html'],
  css: ['<%= yeoman.dist %>/client/!(bower_components){,*/}*.css'],
  js: ['<%= yeoman.dist %>/client/!(bower_components){,*/}*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>/client',
      '<%= yeoman.dist %>/client/assets',
      '<%= yeoman.dist %>/client/assets/images'
    ],

which resolved the issue.

[Wirwing]

Thanks @viz. adding assets directory did the trick!

[gugol2]

None of the solutions here worked for me.
I am using generator-angular 0.15.1

This solved my problem.