Can I import an externally hosted file with sass?

Question

Using Sass (SCSS) / Compass, is it possible to import some CSS/SCSS into your code from an externally hosted file?

I am hosting a jQuery plugin on a CDN and want to keep the CSS in the same location so I don't lose it. However, I'd also like to have the option to be able to pull the CSS into my code and have it compile within my main CSS rather than pulling in an extra CSS file in my HTML. Is this possible?

Answer 1

Sass will not compile any files from a remote location, all files must be accessible from the filesystem (local hard disk, shared network drive, mounted drive, etc.).

Sass also does not compile CSS files at all. https://github.com/nex3/sass/issues/556

@import "my.css";

Compiles to

@import "my.css";

Perhaps you might be interested in Compass extensions?

Answer 2

For those of you who came here looking for a way of importing a CDN as a sass @import I found the answer here: https://github.com/webpack-contrib/sass-loader/issues/246

This is how you do it (using bootstrap as an example):

styles.scss

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css");

Answer 3

Yes, you can import external css file using PostCSS Import URL Plugin. It will pull the external CSS into your code, so you could compile it within your main CSS.

Answer 4

You sure can. In this context, it works exactly as the standard CSS @import rule. Just give it a URL to the CDN-hosted CSS file.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import