How can I fix ValidationError of Sass loader?

Question

I was trying to add global scss variables to my Vue project. I found this example Globally load sass. So I created vue.config.js in my root folder of my Vue project then I copy & paste vue.config.js and change the data inport path and then when I am trying to serve my project I am getting this error :

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? } at validate

I checked my package.json to just be sure that I have installed node-sass and sass-loader and I found those dependencies :

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.2",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }

So I am a little bit confused and I do not know what I am doing wrong. I also know that I can import those .scss variables to every vue component in which i am going to use them but i do not like this solution.

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/style/index.scss";
        `
      }
    }
  }
};

Directory structure

Answer 1

Change data to prependData ...see the docs