53

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?

Chisos Designs
  • 539
  • 1
  • 4
  • 4

6 Answers6

58

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);
RyanNerd
  • 3,059
  • 1
  • 22
  • 28
19

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?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • 3
    Your answer isn't really related to the question. He was asking if he could use externally hosted CSS files within Sass, not anything about local CSS files. I'm pretty sure that it's by design that Sass doesn't compile CSS files into its output file anyway. – Vince Mar 11 '14 at 22:26
  • 5
    @Ghodmode Maybe you should reread the question: "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". I don't know how else that could be interpreted. The location of the file is irrelevant since you get the same results. Currently, Sass does not do what is being asked. – cimmanon Mar 11 '14 at 22:59
  • 1
    @cimmanon Your comment isn't quite correct. Sass will import a .scss file directly into the target file, i.e. it will compile as if you wrote the imported content right inside that file. However, imported .css files, url()s or any import beginning with http:// will compile as `@import`. This means you still have the additional HTTP request that you might be trying to eliminate. The location DOES matter. – Logic Artist Oct 16 '14 at 00:36
  • 1
    @LogicArtist Isn't that what I said? Imported CSS files are not compiled into the file at all. Whether the CSS file is local or remote is irrelevant: the result is the same (you get a standard CSS `@import` statement in the compiled results). **Remote** Sass files are also not compiled into the file. – cimmanon Oct 16 '14 at 01:16
  • Using libsass >= 3.2, you can import css directly into the compiled file: https://github.com/sass/libsass/pull/754 – Alex Mar 01 '16 at 15:11
  • @Alex Yes, but that still won't help if what you want is to import remote files (Sass or CSS) from a remote address like a CDN, which is the point of *this* question. – cimmanon Apr 07 '16 at 13:05
  • Yes, though this was just directed to the second part of your answer that is not correct these days :) – Alex Apr 07 '16 at 14:31
  • The fact that LibSass has added non-standard features over the official Ruby Sass version does not mean my answer is incorrect in any way. – cimmanon Apr 07 '16 at 14:55
  • 2
    Well, I don't see the OP specifying Ruby-Sass, I don't see you making it explicit that your answer is focused on Ruby-Sass and I'm not quite sure that one can regard Ruby-Sass as some kind of canonical standard in regards of Sass. I'd even place my money on that libsass is used more frequently than ruby-sass, perhaps making it the de facto standard? – Alex Apr 07 '16 at 18:46
  • Ruby-sass is now deprecated – Tofandel May 12 '21 at 23:50
7

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

Vince
  • 3,962
  • 3
  • 33
  • 58
  • 4
    Am I missing something or does your link explicitly say that it's *not* possible? – ESR May 24 '17 at 06:44
  • Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file. – Vince Jul 24 '17 at 22:56
  • 4
    "whereas `@import "http://foo.com/bar";` would compile to `@import "http://foo.com/bar";` ". If you import an externally hosted Sass/SCSs file, the import will be compiled into the end result as if it were a CSS import. – ESR Jul 24 '17 at 23:39
3
  @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);

Ahmed eltarouty
  • 55
  • 2
2

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.

Ihor Zenich
  • 10,727
  • 3
  • 22
  • 18
0

@import url('https://example.com/path/filename.scss');

Use import statement to import an external scss file to you local.

smsivaprakaash
  • 1,564
  • 15
  • 11