Grunt CSS import and paths

Question

I have the following setup in Grunt for the concat and minification of my projects css

cssmin: {
        options: {

        },
        concat: {
            files: {
                'dist/app.css': [
                    'tmp/*.css',
                    'app/theme/css/vendors/fontello.css',
                    'app/theme/js/vendors/revolution/css/settings.css',
                    'app/theme/css/styles.css',
                    'app/theme/css/media-queries.css',
                    'app/app.css'
                ]
            }
        },
        min: {
            files: [{
                src: 'dist/app.css',
                dest: 'dist/app.css'
            }]
        }
    },

It works fine with the exception that, as far as I can tell its removed the following import statement

@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic");

And all 3rd party css files have relative image paths which are not resolved. I can see cssmin uses clean css which should be able to help handle these issues but after hours of searching and reading the docs I can't any clear examples or doucmentation on how to configure the above to solve this?

score 1 · Answer 1 · answered Mar 19 '15 at 13:21

I used Ze Rubeus suggestion of moving my font import statement into the HTML instead (a little annoying as it means modifying a 3rd party css file). But I found the option for fixing the css paths which is

rebase: true,
relativeTo: './'

My cssmin configuration now looks like

cssmin: {
        options: {
            rebase: true,
            relativeTo: './'
        },
        concat: {
            files: {
                'dist/app.css': [
                    'tmp/*.css',
                    'app/theme/css/vendors/fontello.css',
                    'app/theme/js/vendors/revolution/css/settings.css',
                    'app/theme/css/styles.css',
                    'app/theme/css/media-queries.css',
                    'app/app.css'
                ]
            }
        },
        min: {
            files: [{
                src: 'dist/app.css',
                dest: 'dist/app.css'
            }]
        }
    }

And everything is working :)

ZEE · Answer 2 · 2015-03-18T23:00:02.667

You have to change all you import PATH depend on this directory 'dist/app.css'

And instead of css font import I advice you to use the HTML link like the following

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' type='text/css'>

make sure to change all url Path's on these directory's :

                    'tmp/*.css',
                    'app/theme/css/vendors/fontello.css',
                    'app/theme/js/vendors/revolution/css/settings.css',
                    'app/theme/css/styles.css',
                    'app/theme/css/media-queries.css',
                    'app/app.css'

depend on this output 'dist/app.css': because there is no task in gruntjs who correct the import Path in css files for you !

regarding your code the watch task need's to be something like so :

   watch: {

       css: {
           files: ['tmp/*.css',
                    'app/theme/css/vendors/fontello.css',
                    'app/theme/js/vendors/revolution/css/settings.css',
                    'app/theme/css/styles.css',
                    'app/theme/css/media-queries.css',
                    'app/app.css'],
           tasks: ['concat','cssmin'],
           options: { spawn: false }
       }
   },

And execute this command grunt watch in your terminal to keep automatically tracking for changes in these files and apply these tasks .

Grunt CSS import and paths

2 Answers2