Come assicurarsi che gli @import remoti vengano elaborati correttamente con Grunt

Question

Uso Grunt per creare il mio progetto e l'attività cssmin all'interno. Il mio file CSS contiene una dichiarazione @import remote e grunt build restituire un avvertimento:

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 

ho trovato le seguenti informazioni nella documentazione clean-css libreria:

Per inline dichiarazioni a distanza @import voi necessità di fornire un callback a minify metodo, ad esempio:

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

Ciò è dovuto ad un fatto, che, mentre i file locali possono essere leggere in modo sincrono, le risorse remote possono essere elaborate solo in modo asincrono. Se non si fornisce una richiamata, le @import remote rimarranno intatte .

Come è possibile descrivere un'attività cssmin nel mio file Gruntfile.js per correggere le istruzioni remote @import di gestione?

Answer 1

Spostare le istruzioni @import nella parte superiore del file CSS lo corregge per me, ho avuto lo stesso problema. Sembra che allo cssmin non piaccia quando le dichiarazioni @import sono nel mezzo del file. Puoi farlo automaticamente con un oggetto options in Grunt, vedi questa risposta per maggiori dettagli: https://stackoverflow.com/a/28454233/2142259

Answer 2

Non è la soluzione migliore, ma ha funzionato per me quando ho spostato tutte le istruzioni @import in un altro file e l'ho inserito nel mio file html appena prima del mio file css principale.