Issues with Google fonts and Sass

Viewed 1857

I'm trying to learn Laravel and I've run into an issue that I can't seem to figure out with Google Fonts and Sass.

I'm trying to load my font on app.scss with:

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

But it compiles to app.css as:

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;
700&display=swap);@charset "UTF-8";

If I manually correct app.css it works. But how do I get Sass or Laravel to compile it properly?

2 Answers

I solved it by modifying it as follows:

original:

@import url ("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");

modified:

 @import url ("https://fonts.googleapis.com/css2?family=Rubik:400,700");
Related