64

I'm using VueJS with the framework VuetifyJS (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?

Tom
  • 5,588
  • 20
  • 77
  • 129

11 Answers11

119

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
alex toader
  • 2,300
  • 1
  • 17
  • 20
  • 3
    Downgrading never seemed to me like the most elegant approach, yet it's the only thing that did the trick for me. The answer below by https://stackoverflow.com/users/5302733/diego-alberto-zapata-h%c3%a4ntsch , however complete, left me with the same error. – crocodile2u Mar 18 '20 at 08:17
  • 3
    Worked for me May 2020 – CodeConnoisseur May 16 '20 at 14:43
  • 3
    Worked for me in May 2020. Looks like people are still talking about it: https://github.com/vuejs/vue-cli/issues/4513 – Ryan May 27 '20 at 23:36
  • 1
    using vue-cli 3 and vue 2.6, sass-loader v8.0.0 worked for me...I did `yarn remove sass-loader && yarn add -D sass-loader@8.0.0` – geneowak Jul 15 '20 at 10:27
  • 1
    This is the quickest (and easiest) fix path on Nuxt – Zmart Oct 15 '20 at 00:52
  • 1
    8.0.0 didn't work for me (same error) but 7.1.0 did. Nuxt 2.14. – GaryO Nov 14 '20 at 15:27
  • This worked for me in june 2021 though the installation asked me to upgrade too but I suggest people should refer to other newer answers here!.. – jovialcore Jul 11 '21 at 13:27
48

Problem

Based on vue-cli - github issue, If you did 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

  • 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

  • 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 options, sassOption , additionalData, if we change data to additionalData it will fix the invalid options errors.

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

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.

Diego Alberto Zapata Häntsch
  • 1,088
  • 16
  • 23
8

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';`
  }
}
plucile
  • 306
  • 3
  • 4
6

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.

madflow
  • 7,718
  • 3
  • 39
  • 54
  • 1
    I can't get it to run and received an error within the CLI to use *new webpack.LoaderOptionsPlugin({* because *load options* is outdated. I'm using _vue.config.js_ (Vue CLI 3) to configure webpack. Can you please post some more details. – Tom Oct 01 '19 at 17:09
  • 1
    How did you create the app (vue init with template, vue create), also: Post that vue.config.js – madflow Oct 01 '19 at 19:06
3

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";`
        }
      }
    }
  };
MD SHAYON
  • 7,001
  • 45
  • 38
2

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",

Kisinga
  • 1,640
  • 18
  • 27
1

change data to prependData. Final result (vue.config.js):

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/sass/variables.sass"`
            }
        }
    }
}
Boern
  • 7,233
  • 5
  • 55
  • 86
1

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
}
Marco Klein
  • 683
  • 5
  • 19
0

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]";`,
      },
    },
  },
}
aroundtheworld
  • 731
  • 1
  • 5
  • 15
0

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/

Shahrukh Haider
  • 454
  • 2
  • 16