Sass Loader Error: Invalid options object that does not match the API schema
node.jsvue.jsNpmSassNode Modulesnode.js Problem Overview
I'm using VueJS with the framework [VuetifyJS][1] (v2.0.19). I'm getting this error after running npm run serve:
> Sass Loader has been initialised using an options object that does not > match the API schema.
What I tried: I've deleted the node_modules folder and reinstalled/updated all npm packages and node.js to the latest stable version.
Full error message:
error in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (/home/do/Desktop/A/Projects/Ral/AppCLI3/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11)
at Object.loader (/home/do/Desktop/A/Projects/Ral/AppCLI3/node_modules/sass-loader/dist/index.js:36:28)
@ ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass 4:14-208 14:3-18:5 15:22-216
@ ./node_modules/vuetify/lib/components/VRangeSlider/VRangeSlider.js
@ ./node_modules/vuetify/lib/components/VRangeSlider/index.js
@ ./node_modules/vuetify/lib/components/index.js
@ ./node_modules/vuetify/lib/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.2.115:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./node_modules/vuetify/src/styles/main.sass
My package.json:
{
"name": "app",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.2.1",
"fibers": "^4.0.1",
"firebase": "^7.0.0",
"material-icons": "^0.3.1",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-flickity": "^1.2.1",
"vue-router": "^3.1.3",
"vuetify": "^2.0.19",
"vuex": "^3.1.1"
},
"devDependencies": {
"@mdi/font": "^4.4.95",
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-plugin-pwa": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"@vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.5.1",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.2.3",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.12.0",
"prettier": "1.18.2",
"sass-loader": "^8.0.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/prettier"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
How to fix this issue? [1]: https://vuetifyjs.com
node.js Solutions
Solution 1 - node.js
Seems same issue like here: https://github.com/JeffreyWay/laravel-mix/issues/2206
Solution is
npm uninstall --save-dev sass-loader
npm install --save-dev sass-loader@7.1.0
Solution 2 - node.js
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 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
it will fix the invalid options errors.
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/styles/variables/index.scss";`
}
}
}
Solution 3 - node.js
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.
Solution 4 - node.js
I had the same issue when upgrading to sass-loader 10. I resolved it by replacing prependData
with additionalData
as per below:
{
test: /\.scss$/,
loader: 'sass-loader',
options: {
additionalData: `@import 'src/scss/helpers/variables';`
}
}
Solution 5 - node.js
indentedSyntax
is part of the sassOptions
:
sassOptions: { indentedSyntax: true }
For example:
{
loader: 'sass-loader',
options: {
sassOptions: {
indentedSyntax: true
}
}
}
So - change your Webpack config to reflect that.
Solution 6 - node.js
In my case I had to downgrage sass-loader, after which I got the real error emmitted on the terminal when I run ng serve
, which whould be vue-cli-service
in your case
I think it's a problem with v8 of sass-loader, will dig further
In the meantime, this might help: In the package.json, edit the sass-loader to read "sass-loader": "7.0.1",
Solution 7 - node.js
change data
to prependData
. Final result (vue.config.js):
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/sass/variables.sass"`
}
}
}
}
Solution 8 - node.js
For those still struggling and still do not have a solution for this with sass-loader v8:
const includePaths = [ 'mypath']
module.exports = {
// ... other config here
css: {
extract: false,
loaderOptions: {
sass: {
sassOptions: { // <<<< This wrapper is needed!
// ... all options here, e.g. prependData, includePaths a.s.o.
includePaths
}
}
}
},
// ... other config here
}
Solution 9 - node.js
if you are using an updated version of sass-loader you need to use additional data instead of data
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/styles/base.scss";`
}
}
}
};
Solution 10 - node.js
Based on the current docs and assuming sass-loader 8+ this is the syntax for importing globally. This imports a file from src/styles/..whatever
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/styles/[rest of path to import]";`,
},
},
},
}
Solution 11 - node.js
I was using Vue 3 with Vue CLI 4.5 that used Webpack 4 and was facing the same issue.
This worked for me:
Upgrade to sass-loader 10:
npm uninstall -D sass-loader
npm install -D sass-loader@^10
Vue.config.js:
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import "~@/scss/colors.scss";`
}
}
}
}
Reference: https://www.catagec.com/blog/load-a-global-scss-file-in-vue-3/