cssmin nicht richtig handhaben @ import

Question

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?

Answer 1

Verwenden Sie das folgende Verfahren:

• Installieren node-less
• Import der Dateien durch Kompilieren mit less ersten
• minify mit cssmin

Referenzen

• node-less

• LESS compile error

Answer 2

Ich habe genau das gleiche Problem mit cssmin und @import, und ich eine Lösung mit Grunzen concat gefunden:

1. Erstellen Sie eine concat grun t Aufgabe, die:
2. Setzen Sie @import URL am Anfang der vereinheitlichten CSS-Datei und ersetzt Referenzen der @ imports URL für "".
3. 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.

Answer 3

Ich fügte die processImport: false Option hinzu, um zu grunzen.

'cssmin': { 
    'options': { 
    'processImport': false 
    } 
} 

Answer 4

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"> 

Answer 5

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

Answer 6

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.