add test case (#31691)

fixes #30567

test/integration/scss-fixtures/external-url/pages/_app.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.scss'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/scss-fixtures/external-url/pages/index.js

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div className="red-text">This text should be red.</div>
+}

test/integration/scss-fixtures/external-url/styles/global.scss

@@ -0,0 +1,9 @@
+$var: red;
+.red-text {
+  color: $var;
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

test/integration/scss/test/index.test.js

@@ -780,6 +780,35 @@ describe('SCSS Support', () => {
     })
   })
 
+  describe('External imports', () => {
+    const appDir = join(fixturesDir, 'external-url')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should compile successfully', async () => {
+      const { code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it(`should've emitted expected files`, async () => {
+      const cssFolder = join(appDir, '.next/static/css')
+
+      const files = await readdir(cssFolder)
+      const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+      expect(cssFiles.length).toBe(1)
+      const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+      expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatch(
+        /^@import url\("https:\/\/fonts\.googleapis\.com\/css2\?family=Poppins:wght@400&display=swap"\);\.red-text\{color:red;font-family:Poppins;font-style:normal;font-weight:400\}$/
+      )
+    })
+  })
+
   describe('Good CSS Import from node_modules', () => {
     const appDir = join(fixturesDir, 'npm-import')