diff --git a/packages/next/build/webpack/config/blocks/css/loaders/global.ts b/packages/next/build/webpack/config/blocks/css/loaders/global.ts
index a5dcf146ff130b1..645d8b5545058de 100644
--- a/packages/next/build/webpack/config/blocks/css/loaders/global.ts
+++ b/packages/next/build/webpack/config/blocks/css/loaders/global.ts
@@ -5,8 +5,8 @@ import { getClientStyleLoader } from './client'
 
 export function getGlobalCssLoader(
   ctx: ConfigurationContext,
-  postCssPlugins: postcss.AcceptedPlugin[],
-  preProcessors: webpack.RuleSetUseItem[] = []
+  postCssPlugins: readonly postcss.AcceptedPlugin[],
+  preProcessors: readonly webpack.RuleSetUseItem[] = []
 ): webpack.RuleSetUseItem[] {
   const loaders: webpack.RuleSetUseItem[] = []
 
@@ -40,7 +40,7 @@ export function getGlobalCssLoader(
   loaders.push(
     // Webpack loaders run like a stack, so we need to reverse the natural
     // order of preprocessors.
-    ...preProcessors.reverse()
+    ...preProcessors.slice().reverse()
   )
 
   return loaders
diff --git a/packages/next/build/webpack/config/blocks/css/loaders/modules.ts b/packages/next/build/webpack/config/blocks/css/loaders/modules.ts
index 9069a1c9680f68c..34e3c92057f310f 100644
--- a/packages/next/build/webpack/config/blocks/css/loaders/modules.ts
+++ b/packages/next/build/webpack/config/blocks/css/loaders/modules.ts
@@ -6,8 +6,8 @@ import { getCssModuleLocalIdent } from './getCssModuleLocalIdent'
 
 export function getCssModuleLoader(
   ctx: ConfigurationContext,
-  postCssPlugins: postcss.AcceptedPlugin[],
-  preProcessors: webpack.RuleSetUseItem[] = []
+  postCssPlugins: readonly postcss.AcceptedPlugin[],
+  preProcessors: readonly webpack.RuleSetUseItem[] = []
 ): webpack.RuleSetUseItem[] {
   const loaders: webpack.RuleSetUseItem[] = []
 
@@ -56,7 +56,7 @@ export function getCssModuleLoader(
   loaders.push(
     // Webpack loaders run like a stack, so we need to reverse the natural
     // order of preprocessors.
-    ...preProcessors.reverse()
+    ...preProcessors.slice().reverse()
   )
 
   return loaders
diff --git a/test/integration/scss-fixtures/loader-order/pages/_app.js b/test/integration/scss-fixtures/loader-order/pages/_app.js
new file mode 100644
index 000000000000000..b89fe16feb73145
--- /dev/null
+++ b/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
diff --git a/test/integration/scss-fixtures/loader-order/pages/index.js b/test/integration/scss-fixtures/loader-order/pages/index.js
new file mode 100644
index 000000000000000..5cbac8a153d77f0
--- /dev/null
+++ b/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>
+}
diff --git a/test/integration/scss-fixtures/loader-order/styles/global.scss b/test/integration/scss-fixtures/loader-order/styles/global.scss
new file mode 100644
index 000000000000000..86fe036bcd25cdc
--- /dev/null
+++ b/test/integration/scss-fixtures/loader-order/styles/global.scss
@@ -0,0 +1,6 @@
+// Double forward slash comment
+
+$var: red;
+.red-text {
+  color: $var;
+}
diff --git a/test/integration/scss/test/index.test.js b/test/integration/scss/test/index.test.js
index d7dfd6b46b1c8d1..531434038b117bf 100644
--- a/test/integration/scss/test/index.test.js
+++ b/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')