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

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 2

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 3

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

Answer 4

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 5

  @import url("http://fonts.googleapis.com/css?family=#{$family}");

1. Imports where the URL ends with .css.

   @import "theme.css";

2. Imports where the URL begins http:// or https://.

   @import "http://fonts.googleapis.com/css?family=Droid+Sans";

3. Imports where the URL is written as a url().

   @import url(theme);
   

4. Imports that have media queries.

   @import "landscape" screen and (orientation: landscape);