Sass Loader Error: Invalid options object that does not match the API schema Sass Loader Error: Invalid options object that does not match the API schema vue.js vue.js

Sass Loader Error: Invalid options object that does not match the API schema


Seems same issue like here:https://github.com/JeffreyWay/laravel-mix/issues/2206

Solution is

npm uninstall --save-dev sass-loadernpm install --save-dev sass-loader@7.1.0


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 the 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 thesassOptions 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 valueof the sourceMap option depends on the devtool value (eval/falsevalues 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 tomigrate on sass (dart-sass)
  • the prependData option was removed in favor the additionalDataoption, see docs
  • when the sourceMap is true, sassOptions.sourceMap,sassOptions.sourceMapContents, sassOptions.sourceMapEmbed,sassOptions.sourceMapRoot and sassOptions.omitSourceMapUrl will beignored.

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 it will fix the invalid options errors.

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


If you are using vue-cli 4 and in order to avoid this error you need to change the config of sass-loader in vue.config.js like the example below, after that the error will be fixed.

const path = require('path');module.exports = {  chainWebpack(config) {    config      .entry('app')      .clear()      .add('./src/core/main.js')      .end();    config.resolve.alias      .set('~', path.join(__dirname, './src'))      .set('@', path.join(__dirname, './src/core'))      .set('#', path.join(__dirname, './src/modules'))  },  css: {    loaderOptions: {      sass: {        sassOptions: {          includePaths: [            path.resolve(__dirname, 'src/core/')          ],          indentedSyntax: true,        },        prependData: '@import "~@/assets/sass/main.scss"',      },    },  },  assetsDir: '@/assets/',}

Don't forget to specify your own configuration.Please checkout the configuration on the sass-loader repo.

If you use vue cli 3, it works with sass-loader v7 not with v8 if you use vue cli 3 and sass-loader v7 the previous configuration still works.

Good luck and regards.

UPDATE (2021):

As @gdaniel said in the comment, the sass-loader team changed from prependData to additionalData property in the options, as you can see in the following commit 062991588769f2.