2

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?

gregh
  • 35,767
  • 9
  • 31
  • 27
  • Sass will include a @charset declaration in the CSS-output if there are any non-ASCII characters in your source files. Might be worth to check your source files. – Daniel Sixl Apr 01 '20 at 17:53
  • @DanielSixl Thanks for the reply. I've looked over the app.scss and _variables files with hidden whitespace showing and I've used the vscode ext. highlight bad chars. But I can't find any non-ASCII chars. Is there a better way to check for non-ASCII Chars? – gregh Apr 01 '20 at 19:20
  • We can grep for them on Linux: https://stackoverflow.com/questions/3001177/how-do-i-grep-for-all-non-ascii-characters But I like to use Notepad++ like described here: https://stackoverflow.com/questions/20889996/how-do-i-remove-all-non-ascii-characters-with-regex-and-notepad – Daniel Sixl Apr 01 '20 at 19:36

2 Answers2

0

This is caused by a known bug in Webpack which appears to be still open.

Details here: https://github.com/webpack/webpack/issues/10873

Adam Moore
  • 665
  • 6
  • 12
-1

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");
alexortizl
  • 2,125
  • 1
  • 12
  • 27
Gustavo Simone
  • 61
  • 1
  • 2