CSSmin Not Correctly Handling @Import

grunt cssmin @import parameters in url

The issue is because the question mark '?' is added to a file rather than an url. try giving an http reference to the same resource or the cdn link then it will work.

$rand: random(99999);
@import url("http://yourcdn.com/custom-style.css?v=#{$rand}");

cssmin grunt plugin generates incorrect source urls in sourcemap

By now I solved this problem with grunt-string-replace plugin. I configured my gruntfile.js so that it adds leading slashes to source files in sourcemap:

module.exports = function(grunt) {

  grunt.initConfig({
    'string-replace': {
      dist: {
        files: {
          'web/css/style.min.css.map': 'web/css/style.min.css.map'
        },
        options: {
          replacements: [{
            pattern: /"([^"])*(less\/)/g,
            replacement: '"/less/'
          }]
        }
      }
    }

    // other code

  });
};

Well, it's a hack, because it requires additional grunt plugin. But it solved the problem.

LESS compile error

Most frustrating thing about LESS is its less than helpful debug information.

It was a simple missing semicolon on line 57

    a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        font-family: @baseFontFamily    //missing semicolon
        font-size: 1.5em;
        color: @gray85;
        font-weight: 300;
        text-decoration: none;
        text-transform: uppercase;
        border-bottom: solid 1px @gray50;
    }
}

The corrected code worked fine

    a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        font-family: @baseFontFamily;
        font-size: 1.5em;
        color: @gray85;
        font-weight: 300;
        text-decoration: none;
        text-transform: uppercase;
        border-bottom: solid 1px @gray50;
    }
}

Best way to include CSS? Why use @import?

From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

---

Related Topics