Upgrade sass-loader support

[bhtw]

• I'm submitting a ...

  • [X] bug report
  • [ ] feature request
  • [ ] support request => Please do not submit support request here, see note at the top of this template.

• BUG: Does not support sass-loader later than v7.3.1

• What is the current behavior? Run error

Running command npm run serve fails

• If the current behavior is a bug, please provide the steps to reproduce, ideally also a screenshot or gif if it's a style issue Steps to reproduce:
  1. Upgrade sass-loader in package.json file to any version of sass-loader later than 7.3.1
  2. Run command npm run serve

You can now see lots of errors and the app won't run. Here is an extraction of the errors in my terminal:

ERROR  Failed to compile with 135 errors                                                                                                                              11:05:03 AM

 error  in ./src/components/admin/AppLayout.vue?vue&type=style&index=0&lang=scss&

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 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/Users/btw/dev/vuestic-admin/node_modules/schema-utils/dist/validate.js:96:11)
    at Object.loader (/Users/btw/dev/vuestic-admin/node_modules/sass-loader/dist/index.js:36:28)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/admin/AppLayout.vue?vue&type=style&index=0&lang=scss& 4:14-458 14:3-18:5 15:22-466
 @ ./src/components/admin/AppLayout.vue?vue&type=style&index=0&lang=scss&
 @ ./src/components/admin/AppLayout.vue
 @ ./src/router/index.js
 @ ./src/app/main.js
 @ multi (webpack)-dev-server/client?http://10.0.0.5:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/app/main.js

 error  in ./src/app/App.vue?vue&type=style&index=0&lang=scss&

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 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/Users/btw/dev/vuestic-admin/node_modules/schema-utils/dist/validate.js:96:11)
    at Object.loader (/Users/btw/dev/vuestic-admin/node_modules/sass-loader/dist/index.js:36:28)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app/App.vue?vue&type=style&index=0&lang=scss& 4:14-434 14:3-18:5 15:22-442
 @ ./src/app/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/app/App.vue
 @ ./src/app/main.js
 @ multi (webpack)-dev-server/client?http://10.0.0.5:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/app/main.js

• What is the expected behavior? App still runs fine.

Please fix this problem so that we can update package.json file to latest versions and keep up to date.

• Note I did run npm update and npm upgrade and the only package that was causing the app crashing was the sass-loader. Bringing the sass-loader package back to 7.3.1 made the app run again.

[ahmedmaghraby]

hi @bhtw I faced your problem too and I did run npm update & npm i sass-loader@latest and worked for me you can delete node_module and run npm cache clean --force & npm i &npm update then try to run npm run serve

[FerRubioMorales]

This does not works.... If u update the sass-loader you will have an error because de data option passes as scss loaderOptions does not works, and if you fix using additionalData you will have errors in mixins and variables not found.... Please, help to update this.

[suvarivaza]

I support the question! How do I update sass-loader correctly???

[asvae]

Please reopen if issue still exists