including google fonts in fonts.scss

[Kenny K Yeo]

Issue Overview

including url in sass is not working in serve-build

Issue Description

serve-dev works

but serve-build, the font is not loaded

Reproducables

add following into src/assets/styles/fonts.scss

@import url(https://fonts.googleapis.com/css?family=Norican);

and edit main.scss like

h4 {
  color: gray;
  font-family: Norican;
}

and gulp serve-build

Information

Operating System	Windows
Node version	4.4.5
NPM Version	2.15.5
Environment	Chrome

---

Hello, @antonybudianto
I have found a walkaround for this, but wanted to share.
I googled and found an article mentioning about at-import.
sass looks adjust the sequence so @imports are at first in main.css but when it concatenated in your build, it becomes not first.

I've adjusted the sequence of css in the index.html but I think when @import is needed, it would better include direct in the index.html like following.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Norican">

what would you think the best way to handle this case?

[Antony Budianto]

I like using direct one too since it's not referencing local asset anyway

[Kenny K Yeo]

yeah avoiding using @import url would be the best.
if there are two or more css using @import url, it will be more complicate.
so, there is no need to change anything. I'm closing this issue.
Have a good night.