Fix preprocessor loader error

test/integration/scss-fixtures/loader-order/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/loader-order/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/loader-order/styles/global.scss

@@ -0,0 +1,6 @@
+// Double forward slash comment
+
+$var: red;
+.red-text {
+  color: $var;
+}

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

@@ -745,6 +745,21 @@ describe('SCSS Support', () => {
     })
   })
 
+  describe('Preprocessor loader order', () => {
+    const appDir = join(fixturesDir, 'loader-order')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should compile successfully', async () => {
+      const { stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+  })
+
   describe('Ordering with styled-jsx (dev)', () => {
     const appDir = join(fixturesDir, 'with-styled-jsx')