cssmin沒有正確處理@import

Question

我對包含@imports的文件使用cssmin。 cssmin正確地遞歸導入本地文件，但對於指向URL的導入，導入是以內聯方式保存的。這會導致縮小的CSS無效，因爲@規則必須位於文件的開頭。有沒有人知道這個問題的一個好的解決方案或解決方法？

Answer 1

使用以下過程：

• 編譯帶有less第一
• 縮小安裝node-less
• 導入的文件與cssmin

參考

• node-less

• LESS compile error

Answer 2

我有完全與cssmin和@import，和我同樣的問題，發現CONCAT與咕嚕的解決方案：

1. 創建一個concat grun t任務：
2. 將@import url放入mified css文件的開頭，並替換@import url對「」的引用。
3. cssmin任務後執行任務concat：cssImport。

咕嚕任務代號：執行（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'] 
      } 
     })} 

我的靈感來自https://github.com/gruntjs/grunt-contrib-concat#custom-process-function。

Answer 3

我將processImport: false選項添加到grunt。

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

Answer 4

把進口在我SCSS的頂部，我沒有工作，我結束了直接從HTML導入外部樣式表：

<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

我有這樣的事情在styles.scss：

@import url(custom-fonts.css); 

我的問題是@import無法找到文件因爲... e根路徑丟失。這是我用yeoman角度發生器Gruntfile所做的。JS配置：

cssmin: { 
    options: { 
    root: '<%= yeoman.dist %>/styles/' 
    } 
}, 

有用的鏈接grunt-contrib-cssmin issue #75

Answer 6

我知道了很長一段時間這個問題，但我寄這對任何人說找上堆棧溢出這個問題...只是把你的代碼/ ！.... /像這樣：

/*! * @import url('//fonts.googleapis.com/cssfamily=Roboto:300,400,400i,500,700,700i'); */ 

將包括在您的目的地分鐘的CSS，但不要忘了在你的頁面的頂部，使用遠程進口。