Error 400 when Importing Google Fonts in .NET Angular Project using Gulp Build - Broken @import Declaration

Question

I'm facing an issue when trying to import Google Fonts into my .NET Angular project's stylesheet. I'm using the following import statement in my stylesheet:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

However, when I attempt to build the project using Gulp, it throws the following error:

Message:
Broken @import declaration of "https://fonts.googleapis.com/css2?family=Poppins:wght@30" - error 400
Details:
fileName: D:\Test\App\DEV_Test\Source\My_App\UI_Tier\MyApp.UI\Content\styles.bundle.css
domainEmitter: [object Object]
domainThrown: false

I'm not sure why I'm getting a "Broken @import declaration" error with an HTTP 400 status code. Can someone help me understand what might be causing this issue and how I can resolve it?

Any guidance or insights on how to resolve this issue would be greatly appreciated. Thank you!