Using SASS causes the build error: `unknown property 'prependData'`

[Byloth]

I'm experiencing this error while building a project using both Vuetify and SASS...

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                            friendly-errors 15:02:15

 ERROR  in ./layouts/default.vue?vue&type=style&index=0&lang=sass&                                                                                                                                                                                 friendly-errors 15:02:15

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                                                                                                                 friendly-errors 15:02:15
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'prependData'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }
    at validate (/path/to/project/tmp-app/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/path/to/project/tmp-app/node_modules/sass-loader/dist/index.js:30:28)
                                                                                                                                                                                                                                                   friendly-errors 15:02:15
 @ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=style&index=0&lang=sass& 4:14-427 14:3-18:5 15:22-435
 @ ./layouts/default.vue?vue&type=style&index=0&lang=sass&
 @ ./layouts/default.vue
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

---

Step to reproduce:

 $ yarn create nuxt-app tmp-app  # [JavaScript, Yarn, Vuetify.js, Universal (SSR / SSG), Server (Node.js hosting), Git]
 $ cd tmp-app/
 $ yarn add sass sass-loader --dev
 $ echo '<style lang="scss">html { font-family: sans-serif; & > body { margin: 0px; padding: 0px; } }</style>' >> ./layouts/default.vue
 $ yarn dev

---

Some useful packages version:

 $ cat ./node_modules/webpack/package.json | grep '"version": '
  "version": "4.44.2",

 $ cat ./node_modules/sass/package.json | grep '"version": '
  "version": "1.26.11",

 $ cat ./node_modules/sass-loader/package.json | grep '"version"'
  "version": "10.0.2",

 $ cat ./node_modules/vuetify/package.json | grep '"version"'
  "version": "2.3.10",

 $ cat ./node_modules/vuetify-loader/package.json | grep '"version"'
  "version": "1.6.0",

 $ cat ./node_modules/@nuxt/core/package.json | grep '"version": '
  "version": "2.14.6",

 $ cat ./node_modules/@nuxtjs/vuetify/package.json | grep '"version": '
  "version": "1.11.2",

[dgrabla]

Who can merge this? We need this fix in a new release.

[ezhimakov]

So, is there any way to use scss right now in nuxt with vuetify? Js as it is in a nutshell, i've istalled nuxt yesterday, selected vuetify and today i learned that nothing is working.

[Byloth]

@ezhimakov

So, is there any way to use scss right now in nuxt with vuetify?

---

I solved using...

  "devDependencies": {
    ...
    "sass": "~1.26.11",
    "sass-loader": "~8.0.2",
    ...
  }

[ShaggyTech]

Edit: This is no longer necessary with the latest version of @nuxtjs/vuetify (1.11.2)

---

Thank you @Byloth ! I ran into this problem last night and I was ready to remove vuetify as a nuxt module and install it manually. Checked this issue again today and saw your post, tried it and the prependData errors went away.

[UrchenkoV]

Hello, @Byloth I did as you wrote and still throws an error.

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'additionalData'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (C:\OSPanel\domains\pizza-vue.loc\node_modules\schema-utils\dist\validate.js:98:11) at Object.loader (C:\OSPanel\domains\pizza-vue.loc\node_modules\sass-loader\dist\index.js:36:28)

package.json

{
  "name": "Pizza",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt -c client/nuxt.config.js",
    "build": "nuxt build -c client/nuxt.config.js",
    "start": "nuxt start -c client/nuxt.config.js",
    "generate": "nuxt generate",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.11.2",
    "@vue/test-utils": "^1.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^26.5.0",
    "fibers": "^5.0.0",
    "jest": "^26.5.0",
    "sass": "~1.26.11",
    "sass-loader": "~8.0.2",
    "vue-jest": "^3.0.4"
  }
}

[Byloth]

Of course, my friend! 😉

As @ShaggyTech said before...

This is no longer necessary with the latest version of @nuxtjs/vuetify (1.11.2)

---

You're using the newer version of @nuxtjs/vuetify (the one that solved the described problem) with the older versions of sass and sass-loader.
Update sass and sass-loader to the latest available versions to solve your problem. 🙃

[UrchenkoV]

@Byloth Thank you. The problem is solved.