Add support for SCSS options (#11063)

* Add support for SCSS includePaths

* Support sassOptions instead of just includePaths

Co-authored-by: Tim Neutkens <[email protected]>
Co-authored-by: Joe Haddad <[email protected]>

Author: 3 people

packages/next/build/webpack-config.ts

@@ -897,6 +897,7 @@ export default async function getBaseWebpackConfig(
     hasSupportCss: !!config.experimental.css,
     hasSupportScss: !!config.experimental.scss,
     assetPrefix: config.assetPrefix || '',
+    sassOptions: config.experimental.sassOptions,
   })
 
   if (typeof config.webpack === 'function') {

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

@@ -43,6 +43,7 @@ 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,
       },
     },
     // Then, `sass-loader` will have passed-through CSS imports as-is instead

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

@@ -13,6 +13,7 @@ export async function build(
     hasSupportCss,
     hasSupportScss,
     assetPrefix,
+    sassOptions,
   }: {
     rootDirectory: string
     customAppFile: string | null
@@ -21,6 +22,7 @@ export async function build(
     hasSupportCss: boolean
     hasSupportScss: boolean
     assetPrefix: string
+    sassOptions: any
   }
 ): Promise<webpack.Configuration> {
   const ctx: ConfigurationContext = {
@@ -35,6 +37,7 @@ export async function build(
         ? assetPrefix.slice(0, -1)
         : assetPrefix
       : '',
+    sassOptions,
   }
 
   const fn = pipe(base(ctx), css(hasSupportCss, hasSupportScss, ctx))

packages/next/build/webpack/config/utils.ts

@@ -11,6 +11,8 @@ export type ConfigurationContext = {
   isClient: boolean
 
   assetPrefix: string
+
+  sassOptions: any
 }
 
 export type ConfigurationFn = (

packages/next/next-server/server/config.ts

@@ -52,6 +52,7 @@ const defaultConfig: { [key: string]: any } = {
     reactMode: 'legacy',
     workerThreads: false,
     basePath: '',
+    sassOptions: {},
   },
   future: {
     excludeDefaultMomentLocales: false,

test/integration/scss-fixtures/basic-module-include-paths/next.config.js

@@ -0,0 +1,9 @@
+const path = require('path')
+
+module.exports = {
+  experimental: {
+    sassOptions: {
+      includePaths: [path.join(__dirname, 'styles')],
+    },
+  },
+}

test/integration/scss-fixtures/basic-module-include-paths/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-include-paths/pages/index.module.scss

@@ -0,0 +1,5 @@
+@import '_vars.scss';
+
+.redText {
+  color: $var;
+}

test/integration/scss-fixtures/basic-module-include-paths/styles/_vars.scss

@@ -0,0 +1 @@
+$var: red;

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

@@ -78,6 +78,34 @@ describe('SCSS Support', () => {
     })
   })
 
+  describe('Basic Module Include Paths Support', () => {
+    const appDir = join(fixturesDir, 'basic-module-include-paths')
+
+    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')