How to make sure remote @imports are processed correctly with Grunt

Question

I use Grunt to build my project and cssmin task inside. My CSS file contains a remote @import statements and grunt build return a warning:

Running "cssmin:generated" (cssmin) task
>> Ignoring remote @import of "http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" as no callback given.,Ignoring remote @import of "http://fonts.googleapis.com/css?family=Maven+Pro:500" as no callback given.
>> 2 files created. 322.48 kB → 249.05 kB

I've found the following information in the clean-css library documentation:

In order to inline remote @import statements you need to provide a callback to minify method, e.g.:

var CleanCSS = require('clean-css');
var source = '@import url(http://path/to/remote/styles);';
new CleanCSS().minify(source, function (errors, minified) {
  // minified.styles
});

This is due to a fact, that, while local files can be read synchronously, remote resources can only be processed asynchronously. If you don't provide a callback, then remote @imports will be left intact.

How can I describe a cssmin task in my Gruntfile.js to correct handling remote @import statements?

Answer 1

Moving the @import statements to the top of the CSS file fixes it for me, I had the same problem. It seems like cssmin doesn't like it when @import statements are in the middle of the file. You can do this automatically with an options object in Grunt, see this answer for more details: https://stackoverflow.com/a/28454233/2142259

Answer 2

It is not the best solution, but it worked for me when I moved all the @import statements to another file and inserted it in my html file just before my main css file.