Merge pull request #393 from micheldenegri/sass-loader

fix: sass-loader switch to additionalData option from prependData

Author: clarkdo

package.json

@@ -31,8 +31,8 @@
   "dependencies": {
     "deepmerge": "^4.2.2",
     "fibers": "^4.0.3",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.27.0",
+    "sass-loader": "^10.0.3",
     "vuetify": "^2",
     "vuetify-loader": "^1.4.3"
   },

src/font.ts

@@ -27,11 +27,11 @@ export default function setupFont (this: ModuleThis, options: FontOptions) {
     const userFontFamily = Array.isArray(options.family)
       ? options.family.map(x => `'${x}'`).join(', ')
       : `'${options.family}'`
-    sass.prependData = [`$body-font-family: ${userFontFamily}, sans-serif`, sass.prependData].join('\n')
+    sass.additionalData = [`$body-font-family: ${userFontFamily}, sans-serif`, sass.additionalData].join('\n')
   }
 
   // Add font-size custom variable
   if (options.size) {
-    sass.prependData = [`$font-size-root: ${options.size}px`, sass.prependData].join('\n')
+    sass.additionalData = [`$font-size-root: ${options.size}px`, sass.additionalData].join('\n')
   }
 }

src/sass.ts

@@ -20,8 +20,8 @@ export default function setupSass (this: ModuleThis, customVariables: Options['c
   // Custom variables
   if (customVariables && customVariables.length > 0) {
     const sassImports = customVariables.map(path => `@import '${path}'`).join('\n')
-    sass.prependData = [sass.prependData, sassImports].join('\n')
+    sass.additionalData = [sass.additionalData, sassImports].join('\n')
     const scssImports = customVariables.map(path => `@import '${path}';`).join('\n')
-    scss.prependData = [scss.prependData, scssImports].join('\n')
+    scss.additionalData = [scss.additionalData, scssImports].join('\n')
   }
 }

test/module.test.ts

@@ -64,10 +64,10 @@ describe('setupFont', () => {
       }
     })
 
-    const { prependData } = nuxt.options.build.loaders.sass
+    const { additionalData } = nuxt.options.build.loaders.sass
 
-    expect(prependData).toContain("$body-font-family: 'Montserrat', sans-serif")
-    expect(prependData).toContain('$font-size-root: 20px')
+    expect(additionalData).toContain("$body-font-family: 'Montserrat', sans-serif")
+    expect(additionalData).toContain('$font-size-root: 20px')
   })
 
   test('with list of fonts', () => {
@@ -76,9 +76,9 @@ describe('setupFont', () => {
       size: 20
     })
 
-    const { prependData } = nuxt.options.build.loaders.sass
+    const { additionalData } = nuxt.options.build.loaders.sass
 
-    expect(prependData).toContain("$body-font-family: 'Montserrat', 'Roboto', sans-serif")
+    expect(additionalData).toContain("$body-font-family: 'Montserrat', 'Roboto', sans-serif")
   })
 })
 
@@ -112,8 +112,8 @@ describe('setupSass', () => {
   test('customVariables', () => {
     setupSass(['/path/to/variables.scss'])
 
-    expect(nuxt.options.build.loaders.sass.prependData).toContain("@import '/path/to/variables.scss'")
-    expect(nuxt.options.build.loaders.scss.prependData).toContain("@import '/path/to/variables.scss';")
+    expect(nuxt.options.build.loaders.sass.additionalData).toContain("@import '/path/to/variables.scss'")
+    expect(nuxt.options.build.loaders.scss.additionalData).toContain("@import '/path/to/variables.scss';")
   })
 })