BUG: ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

[alexiej]

On this package list:

    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "storybook-addon-vue-info": "1.1.1",
    "storybook-vue-router": "1.0.3",
    "typescript": "~3.5.3",
    "vue-cli-plugin-atomic-design": "^0.3.3",
    "vue-cli-plugin-electron-builder": "^1.4.0",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-cli-plugin-scss-base": "0.2.2",
    "vue-template-compiler": "^2.6.10"

and this configuration

  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/scss/settings.scss";'
      }
    }
  }

I've got error

 ERROR  Failed to compile with 2 errors                                                                                                                                                                        18:43:37

 error  in ./src/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 initialised 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? }

To fix this I have to change the configuration to:

  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/scss/settings.scss";'
      }
    }
  }

[class90431]

It work !

[Junjie1314]

Nice,It work!

[Kamil-Jasinski]

Thank You !

[soneryildirimx]

Thanks !

[Jaxz102]

Tysm!! What a life saver!!

[denisecbiker]

where do i find this config please css: { loaderOptions: { sass: { prependData: '@import "@/scss/settings.scss";' } } }