7

I use vue and when I run it, there is a warning. I tried npm update without luck. How to get rid off it?

vue-cli-service serve
WARN  A new version of sass-loader is available. Please upgrade for best experience.
Leos Literak
  • 8,805
  • 19
  • 81
  • 156
  • 5
    Have you tried `npm i sass-loader@latest` – Serg Mar 14 '20 at 19:22
  • 2
    Thanks, it helped. Why update did not help? There was "sass-loader": "^7.1.0" – Leos Literak Mar 14 '20 at 19:29
  • 5
    In most cases we specify the version in the `package.json` like this `^7.1.0` and that says that we allow to update ony the **minor** versions. So `npm update` will not touch the **major** version. – Serg Mar 14 '20 at 19:39

2 Answers2

9

Serg already gave the answer in comment. It's worked for me. Adding the answer for others. Hope it will help others.

Just run this command

npm i sass-loader@latest
Emtiaz Zahid
  • 2,645
  • 2
  • 19
  • 35
4

You can update your packages via using yarn upgrade-interactive --latest, in case of sass-loader, if you have upgrade it from 7 to 9, you may have some invalid options erros which you can fixed in below steps as I've explained before: https://stackoverflow.com/a/62844942/12666332

Problem

Based on https://github.com/vuejs/vue-cli/issues/4513, And If you have upgrade your sass-loader from v7 to 8 or 9, You may have faced with th validation-error for invalid options

vue.config.js(valid syntax for sass-loaderv7 in webpack)

  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/variables/index.scss";`
      }
    }
  }

errors

object:
    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:

sass-loader v8.0 Breaking Changes

You should know that v8. has below breaking changes :https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0

  • minimum required webpack version is 4.36.0
  • minimum required node.js version is 8.9.0
  • move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this.
  • the data option was renamed to the prependData option default value of the sourceMap option depends on the devtool value (eval/false values don't enable source map generation)

Solution v8

As the docs says, move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this. the data option was renamed to the prependData option

sass-loader v9.0 Breaking Changes

You should know that v9. has below breaking changes :https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0

  • BREAKING CHANGES minimum supported Nodejs version is 10.13
  • prefer sass (dart-sass) by default, it is strongly recommended to migrate on sass (dart-sass)
  • the prependData option was removed in favor the additionalData option, see docs
  • when the sourceMap is true, sassOptions.sourceMap, sassOptions.sourceMapContents, sassOptions.sourceMapEmbed, sassOptions.sourceMapRoot and sassOptions.omitSourceMapUrl will be ignored.

Solution v9

In ver9 as you can see in the docs https://github.com/webpack-contrib/sass-loader#options (https://github.com/webpack-contrib/sass-loader#sassoptions , https://github.com/webpack-contrib/sass-loader#additionaldata), if we change data to additionalData if will fix the invalid options errors.

  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/variables/index.scss";`
      }
    }
  }
SeyyedKhandon
  • 5,197
  • 8
  • 37
  • 68