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

Simple, Beautiful Publishing

This website is powered by Postleaf, an open source blogging platform I built myself. Check it out if you’re looking for a fresh, modern approach to content management.

Author avatar

About the author

Cory LaViska is a founder, web developer, and bootstrapper based in Orlando, Florida. Need to get in touch? You can connect with him on Twitter. Looking for a simple, no-worry CMS for your clients? Try my Surreal CMS!