Ich verwende cssmin auf Dateien mit @imports. cssmin importiert rekursiv lokale Dateien korrekt, aber für Importe, die auf eine URL verweisen, werden die Importe inline gelassen. Dies macht das resultierende minimierte CSS ungültig, weil die @ -Regeln am Anfang der Datei stehen müssen. Kennt jemand eine gute Lösung oder Workaround für dieses Problem?cssmin nicht richtig handhaben @ import
Antwort
Verwenden Sie das folgende Verfahren:
- Installieren
node-less
- Import der Dateien durch Kompilieren mit
less
ersten - minify mit
cssmin
Referenzen
Ich habe genau das gleiche Problem mit cssmin und @import, und ich eine Lösung mit Grunzen concat gefunden:
- Erstellen Sie eine concat grun t Aufgabe, die:
- Setzen Sie @import URL am Anfang der vereinheitlichten CSS-Datei und ersetzt Referenzen der @ imports URL für "".
- Führen Sie die Task concat: cssImport nach cssmin task aus.
Grunt Aufgabe Code: auszuführen (Concat: cssImport)
grunt.initConfig({
concat: {
cssImport: {
options: {
process: function(src, filepath) {
return "@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);"+src.replace('@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);', '');
}
}
},
files: {
'your_location_file_origin/file.full.min.css': ['your_location_file_destination/file.full.min.css']
}
})}
Meine Inspiration kommt aus https://github.com/gruntjs/grunt-contrib-concat#custom-process-function.
Ich fügte die processImport: false
Option hinzu, um zu grunzen.
'cssmin': {
'options': {
'processImport': false
}
}
Das ist falsch! Es macht grunt ignore import-Anweisungen und verschiebt sie nicht nach oben – olefrank
die Importe an der Spitze meiner SCSS Putting nicht für mich arbeiten, landete ich aus dem HTML-Code direkt die externen Stylesheets importieren up:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300"
rel="stylesheet">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
......
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/app.css -->
<link el="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/app.css">
ich so etwas wie dies hatte in der styles.scss:
@import url(custom-fonts.css);
Mein Problem war die @import nicht in der Lage war, die Dateien becaus zu finden e die Wurzel Pfad fehlte. Hier ist, was ich mit yeoman Winkelgenerator Gruntfile gemacht habe.js config:
cssmin: {
options: {
root: '<%= yeoman.dist %>/styles/'
}
},
Nützlicher Link grunt-contrib-cssmin issue #75
weiß, dass ich diese Frage für eine sehr lange Zeit, aber ich poste das jemand für die auf Stack-Überlauf für dieses Problem suchen ... nur für den/Code setzen ! ..../wie folgt aus:
/*! * @import url('//fonts.googleapis.com/cssfamily=Roboto:300,400,400i,500,700,700i'); */
es in Ihrem Ziel min CSS umfassen wird aber vergessen sie nicht, Remote-Import in oberen Rand der Seite zu verwenden.
Versuchen Sie, Cssjoin dann Cssmin zu laufen? https://github.com/suisho/cssjoin Oder warum nicht die Datei von import @ url lokalisieren? –
cssjoin enthält auch die @imports in der Mitte der Datei. Ich kann die URL nicht lokalisieren. – user3204380
Ich hatte das gleiche Problem mit Cssmin. Ich konnte es umgehen, indem ich die @ import-Anweisungen zum Anfang der ersten Datei hinzufügte, die ich kombinierte. –