Add support for sass-loader prependData option (#12277)

This PR adds support for prepending sass code before the actual entry file.

It's common for developers to import their sass mixins and variables once on their project config so they don't need to import them on every file that requires it. Frameworks like gatsby and nuxt.js already support that handy feature.

The way it works is:

```
/// next.config.js
module.exports = {
  experimental: {
    sassOptions: {
      prependData: `
        /// Scss code that you want to be
        /// prepended to every single scss file.
      `,
    },
  },
}
```

Fixes #11617 and duplicates

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')