Importing Plain CSS Files with Sass/SCSS

When I first started using Sass, there was one thing that drove me crazy about it compared to Less. For some reason, including a plain CSS file just wasn't something the compiler wanted to do:

/* Uncaught, unspecified "error" event. (Ignoring local @import of "animate.min.css" as resource is missing.) */
@import 'animate.css';

But, annoyingly, the resource is there. So why does the compiler report it missing?

I may never understand the logic behind this design decision, but the solution is to simply omit the .css extension:

/* Imports animate.css */
@import 'animate';

This works as of version 3.2.

And for those using Less, here's the equivalent syntax:

/* Import CSS file using Less */
@import (css) "animate.css";
Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.