cssmin not correctly handling @import

Question

I am using cssmin on files containing @imports. cssmin is recursively importing local files correctly, but for imports that point to a URL the imports are left inline. This makes the resulting minified CSS invalid because @ rules must be at the beginning of the file. Does anyone know a good solution or workaround to this problem?

Answer 1

I have exactly the same problem with cssmin and @import, and i found a solution with grunt concat:

1. Create a concat grunt task that:
2. Put @import url in the begining of mified css file and replaces references of @imports url for "".
3. Execute task concat:cssImport after cssmin task.

Grunt task Code: to execute (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']
            }
        } )}

My inspiration comes from https://github.com/gruntjs/grunt-contrib-concat#custom-process-function.

Answer 2

I added the processImport: false option to grunt.

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

Answer 3

Use the following process:

• Install node-less
• import the files by compiling with less first
• minify with cssmin

References

• node-less

• LESS compile error

Answer 4

I know this question for a very long time but i post this for anybody that looking for this issue on stack overflow ... just put your code in /!..../ like this:

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

it will be include in your destination min css but don't forget to use remote import in top of your page.

Answer 5

Putting the imports at the top of my scss didn't work for me,I ended up importing the external stylesheets directly from the 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 6

I had something like this in the styles.scss:

@import url(custom-fonts.css);

My problem was the @import wasn't able to find the files because the root path was missing. Here's what I did with yeoman angular generator Gruntfile.js config:

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

Useful link grunt-contrib-cssmin issue #75