fix: fix indentedSyntax issue around scss files

Author: kevinmarrec

lib/module.js

@@ -2,6 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const consola = require('consola')
 const merge = require('deepmerge')
+const dartSass = require('sass')
 
 const defaults = {
   customVariables: [],
@@ -20,13 +21,6 @@ const cdn = {
   'fa4': 'https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css'
 }
 
-const sassLoaderOptions = {
-  implementation: require('sass'),
-  sassOptions: {
-    indentedSyntax: true
-  }
-}
-
 module.exports = function (moduleOptions) {
   this.nuxt.hook('build:before', () => {
     const options = merge.all([
@@ -44,13 +38,20 @@ module.exports = function (moduleOptions) {
     }
 
     // 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
-    this.options.build.loaders.sass.prependData = this.options.build.loaders.sass.data
-    delete this.options.build.loaders.sass.data
 
-    // Customize sass-loader options
-    Object.assign(this.options.build.loaders.scss, sassLoaderOptions)
-    Object.assign(this.options.build.loaders.sass, sassLoaderOptions)
+    // Customize sass & scss loaders options
+    Object.assign(this.options.build.loaders.sass, {
+      implementation: dartSass,
+      sassOptions: {
+        indentedSyntax: true
+      }
+    })
+
+    Object.assign(this.options.build.loaders.scss, {
+      implementation: dartSass
+    })
 
     // Custom variables
     const sassLoaderData = this.options.build.loaders.sass.prependData

test/module.test.js

@@ -64,7 +64,7 @@ describe('module', () => {
       build: {
         loaders: {
           sass: {
-            data: '$someVariable: #000000'
+            prependData: '$someVariable: #000000'
           }
         }
       },