SASS not compiling external Google Font with @import

I'm using the following line in scss:

@import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);

Which gets compiled to css without errors to... exactly the same:

@import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);

But it should get compiled to:

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;

etc...

I'm using gulp sass to compile my scss, which is based on libsass. It says here that my syntax is correct. Why isn't this working?

Solution

This is in fact expected behaviour. Quoting the Sass docs:

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

If the file’s extension is .css.

If the filename begins with http://.

If the filename is a url().

If the @import has any media queries.

In other words: Sass does not integrate the css from google fonts directly into your css file. Instead, at runtime, the css import directive will resolve the link. Google responds differently depending on your browser by the way.