15

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?

tolyasik
  • 345
  • 2
  • 13

2 Answers2

8

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

Community
  • 1
  • 1
Bill Mei
  • 717
  • 1
  • 10
  • 22
  • This in fact solves the issue because cssmin doesn´t relocate `@import`s but this also doesn´t import remote css to avoid use of `@import`. The callback function mentioned by `clean-css` library would inline the css files remotely referenced by `@import`. – JrBenito Jul 28 '16 at 17:19
4

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.

Eder Franco
  • 311
  • 2
  • 10
  • 2
    This is effectively the same as [this answer](http://stackoverflow.com/a/31174350/1677912), except for the introduction of a separate file. – Mogsdad Apr 26 '16 at 01:30
  • So far the unique answer I saw that might inline remote css is this [answer][http://stackoverflow.com/questions/21173522/cssmin-not-correctly-handling-import/23944208#23944208]. But I did not test it yet. – JrBenito Jul 28 '16 at 17:20