Relative paths in CSS and Grunt minification?

Question

Before I ask this question I want to point out that there are several similar questions posted here on StackOverflow, but none of them provide an accurate solution to the problem.

---

The problem

I have a workflow setup where Grunt combines and minifies multiple css files into one single file for a production environment.

The problem I'm facing is that font and image paths are breaking after running Grunt, as they're still pointing towards their existing relative file paths.

As an example:

Within static/homepage/startup/common-files/css/icon-font.css I have the following CSS rule:

@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);

In my Gruntfile, I specify that I want the output of my minified css file to be style.min.css located at static/css/custom/homepage/. The problem with this is that the filepath changes, resulting in all font and image dependencies to no longer be found and return a 404 status in the browser.

What I've done to try solve this

I've figured that there are 2 options to fix this issue:

1. Copy all dependant files so that they're relative to the new directory wherestyle.min.css resides. The downside to this is that it could quickly become messy and ruin my project folder structure!
2. Change the paths manually by hand. But then again, what's the point in this? Grunt was designed for automating tasks!

Does anybody know how to fix this problem? I've wasted nearly 10 hours on this and I'm starting to give up. People have claimed to have fixed the issue over at the Github issue page, but nobody really says how they fixed it.

EDIT:

I've looked through the clean-css library source code and it seems that you can pass a relativeTo property to the minifier object. I've had a mess around with this but I'm still stuck. I'll report back if I get any further with this.

EDIT:

Okay I've finally found some documentation which explains what relativeTo (and other) properties do. I'm still stuck on exactly what my configuration should be for my file structure though....

relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or an output file to which rebase all URLs

---

Here's my Grunt configuration file for reference:

    module.exports = function(grunt) {
        grunt.initConfig({
            concat: {
                homepage: {
                    src: [
                        'static/homepage/startup/common-files/css/icon-font.css', 
                        'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
                        'static/homepage/startup/flat-ui/css/flat-ui.css',
                        'static/homepage/static/css/style.css'
                    ],
                    dest: 'static/css/custom/homepage/compiled.css',
                }
            },
            cssmin: {

                homepage: {
                    src: 'static/css/custom/homepage/compiled.css',
                    dest: 'static/css/custom/homepage/style.min.css'
                }   
            }                           
        });             

        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks("grunt-css-url-rewrite");
        grunt.registerTask('build', ['concat', 'cssmin']);
        grunt.registerTask('default', ["build"]);
};

Thanks.

Douglas

I have the same issue, spent hours trying to play with 'relativeTo', 'target' and 'root' without success :/ – Heterophyllous

I may be getting close to a solution! See my comment here (my username is jjmpsp): github.com/yeoman/grunt-usemin/issues/225 – Douglas

Ok I'll try to take a look at it tomorrow. (I already feel the pain ^^) – Heterophyllous

Well I've finally managed to make it works. You should remove the concat task and only use cssmin. Then try to play with options.target, maybe 'static/css/custom/homepage/style.min.css'. For those using usemin like me, you can remove the concat task by setting the flow manually. – Heterophyllous

Answer 1

Create a less file in static/css/custom/homepage as styles.less

@import your css relatively:

@import "../../../homepage/startup/common-files/css/icon-font.css";
@import "../../../homepage/startup/flat-ui/bootstrap/css/bootstrap.css";
@import "../../../homepage/startup/flat-ui/css/flat-ui.css";
@import "../../../homepage/static/css/style.css";

Then in your gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({
      less: {
        dist: {
            options: {
                compress: true,
                sourceMap: false,
                // Add any other path/to/fonts here
                paths: ['static/homepage/startup/common-files']
            },
            files: {
                'public/css/dist/style.min.css': 'public/css/default/styles.less'
            }
        }
    }       
  });             

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks("grunt-css-url-rewrite");
  grunt.registerTask('build', ["less:dist"]);
  grunt.registerTask('default', ["build"]);
};

Apc