refactor: clean up sass setup

Author: kevinmarrec

src/index.ts

@@ -26,7 +26,7 @@ const vuetifyModule: Module<Options> = function (moduleOptions) {
       options.defaultAssets.icons && setupIcons.call(this, options.defaultAssets.icons)
     }
 
-    setupSass.call(this, options)
+    setupSass.call(this, options.customVariables)
     setupBuild.call(this, options)
   })
 }

src/sass.ts

@@ -2,23 +2,23 @@ import { ModuleThis } from '@nuxt/types/config/module'
 import dartSass from 'sass'
 import { Options } from './options'
 
-export default function setupSass (this: ModuleThis, options: Pick<Options, 'customVariables'>) {
-  // Ensure sass-loader@8 compatibility (https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0)
-  // Cause since loader options validation, this will fail: https://github.com/nuxt/nuxt.js/tree/c8ee9a660809e856c28d8678c6a632bbdd6ed00f/packages/config/src/config/build.js#L50
-  delete this.options.build!.loaders.sass.indentedSyntax
+export default function setupSass (this: ModuleThis, customVariables: Options['customVariables']) {
+  const { sass, scss } = this.options.build!.loaders
 
   // Use Dart Sass
-  this.options.build!.loaders.sass.implementation =
-    this.options.build!.loaders.scss.implementation =
-      dartSass
+  sass.implementation = scss.implementation = dartSass
 
-  // Ensure it uses indented syntax for Sass files
-  this.options.build!.loaders.sass.sassOptions = this.options.build!.loaders.sass.sassOptions || {}
-  this.options.build!.loaders.sass.sassOptions.indentedSyntax = true
+  // Ensure compatibility with Nuxt < 2.10 (i.e. before https://github.com/nuxt/nuxt.js/pull/6460)
+  if (!sass.sassOptions) {
+    delete sass.indentedSyntax
+    sass.sassOptions = {
+      indentedSyntax: true
+    }
+  }
 
   // Custom variables
-  if (options.customVariables && options.customVariables.length > 0) {
-    const imports = options.customVariables.map(path => `@import '${path}'`).join('\n')
-    this.options.build!.loaders.sass.prependData = [this.options.build!.loaders.sass.prependData, imports].join('\n')
+  if (customVariables && customVariables.length > 0) {
+    const imports = customVariables.map(path => `@import '${path}'`).join('\n')
+    sass.prependData = [sass.prependData, imports].join('\n')
   }
 }

test/module.test.ts

@@ -24,7 +24,7 @@ const setupBuild = (options?: Options) => {
 }
 const setupFont = (options?: FontOptions) => _setupFont.call(nuxt.moduleContainer, options)
 const setupIcons = (preset?: IconPreset) => _setupIcons.call(nuxt.moduleContainer, preset)
-const setupSass = (options?: Options) => _setupSass.call(nuxt.moduleContainer, options)
+const setupSass = (customVariables?: Options['customVariables']) => _setupSass.call(nuxt.moduleContainer, customVariables)
 
 beforeEach(async () => {
   nuxt = new Nuxt()
@@ -64,8 +64,10 @@ describe('setupFont', () => {
       }
     })
 
-    expect(nuxt.options.build.loaders.sass.prependData).toContain("$body-font-family: 'Montserrat', sans-serif")
-    expect(nuxt.options.build.loaders.sass.prependData).toContain('$font-size-root: 20px')
+    const { prependData } = nuxt.options.build.loaders.sass
+
+    expect(prependData).toContain("$body-font-family: 'Montserrat', sans-serif")
+    expect(prependData).toContain('$font-size-root: 20px')
   })
 })
 
@@ -84,18 +86,20 @@ describe('setupIcons', () => {
 describe('setupSass', () => {
   test('default', () => {
     delete nuxt.options.build.loaders.sass.sassOptions
-    setupSass(defaultOptions)
 
-    expect(nuxt.options.build.loaders.sass.indentedSyntax).toBeUndefined()
-    expect(nuxt.options.build.loaders.sass.implementation).toEqual(dartSass)
-    expect(nuxt.options.build.loaders.sass.sassOptions.indentedSyntax).toBe(true)
-    expect(nuxt.options.build.loaders.scss.implementation).toEqual(dartSass)
+    setupSass()
+
+    const { sass, scss } = nuxt.options.build.loaders
+
+    expect(sass.implementation).toEqual(dartSass)
+    expect(scss.implementation).toEqual(dartSass)
+
+    expect(sass.indentedSyntax).toBeUndefined()
+    expect(sass.sassOptions.indentedSyntax).toBe(true)
   })
 
   test('customVariables', () => {
-    setupSass({
-      customVariables: ['/path/to/variables.scss']
-    })
+    setupSass(['/path/to/variables.scss'])
 
     expect(nuxt.options.build.loaders.sass.prependData).toContain("@import '/path/to/variables.scss'")
   })