Add support for sass-loader prependData option

packages/next/build/webpack/config/blocks/css/index.ts

@@ -28,6 +28,8 @@ export const css = curry(async function css(
   ctx: ConfigurationContext,
   config: Configuration
 ) {
+  const { prependData: sassPrependData, ...sassOptions } = ctx.sassOptions
+
   const sassPreprocessors: webpack.RuleSetUseItem[] = [
     // First, process files with `sass-loader`: this inlines content, and
     // compiles away the proprietary syntax.
@@ -37,7 +39,8 @@ export const css = curry(async function css(
         // Source maps are required so that `resolve-url-loader` can locate
         // files original to their source directory.
         sourceMap: true,
-        sassOptions: ctx.sassOptions,
+        sassOptions,
+        prependData: sassPrependData,
       },
     },
     // Then, `sass-loader` will have passed-through CSS imports as-is instead

test/integration/scss-fixtures/basic-module-prepend-data/next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  sassOptions: {
+    prependData: `
+      $var: red;
+    `,
+  },
+}

test/integration/scss-fixtures/basic-module-prepend-data/pages/index.js

@@ -0,0 +1,9 @@
+import { redText } from './index.module.scss'
+
+export default function Home() {
+  return (
+    <div id="verify-red" className={redText}>
+      This text should be red.
+    </div>
+  )
+}

test/integration/scss-fixtures/basic-module-prepend-data/pages/index.module.scss

@@ -0,0 +1,3 @@
+.redText {
+  color: $var;
+}

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

@@ -106,6 +106,34 @@ describe('SCSS Support', () => {
     })
   })
 
+  describe('Basic Module Prepend Data Support', () => {
+    const appDir = join(fixturesDir, 'basic-module-prepend-data')
+
+    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 a single CSS file`, 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)
+      expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain(
+        'color:red'
+      )
+    })
+  })
+
   describe('Basic Global Support with src/ dir', () => {
     const appDir = join(fixturesDir, 'single-global-src')