Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Google Font's @import statenent is breaking after compiling from SCSS to CSS

See original GitHub issue

Laravel Mix Version: 5.0.4
Node Version: 12.16.3
NPM Version: 6.14.4
OS:

Description:

The generated CSS breaks when SCSS has @import statement with ; in url.

Steps To Reproduce:

I was importing google fonts in my SCSS file:

This statement below works

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

This statement below BREAKS

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

The css generated with the above statement is like this.

@import url(https://fonts.googleapis.com/css2?family=Lora:wght@400;

700&display=swap);

Looks like ; (semicolon) in the URL is seen as an end of the statement by the compiler.

Issue Analytics

State:
Created 3 years ago
Reactions:8
Comments:9

Top GitHub Comments

27reactions

Chopinskycommented, Jul 5, 2020

A workaround is to use “%3b” instead of “;” in your link

2reactions

warna720commented, Dec 9, 2020

Workaround works but this shouldn’t be closed. Bug is still there.

Top Results From Across the Web

Google Font's @import statenent is breaking after compiling ...

The generated CSS breaks when SCSS has @import statement with ; in url. Steps To Reproduce: I was importing google fonts in my...

error when importing local google fonts with sass new version

Since Sass is whitespace-sensitive (in contrast to scss), the previously used new lines seem to break parsing the src property.

Issues with Google fonts and Sass compile. - Laracasts

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....

font-face - CSS: Cascading Style Sheets - MDN Web Docs

Chrome Edge @font‑face Full support. Chrome1. Toggle history Full support... OpenType CBDT and CBLC rendering Full support. Chrome66. Toggle history Full support... OpenType COLRv0 rendering Full...

Loading Fonts with webpack - Chris Courses

We're going to start with a basic webpack config that compiles SCSS down to CSS. Download the repo, install its dependencies (use yarn...