How to add scss files to Vue project globally 2020

Question

I am trying to add global scss variables to my vue project.

I found here(css tricks) and here(vue school) that what i have to do is to install sass-loader running npm i node-sass sass-loaderin the command line.

I also need in my project a vue.config.js file with the following :

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/_variables.scss";`
      }
    }
  }
};

where _variables.scss is the file that i want to import globally.

When i run npm run build in my project i get this error :

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: semicolons aren't allowed in the indented syntax.
  ╷
1 │ @import "@/styles/_variables.scss";
  │                                   ^
  ╵

If i erase the semicolon :

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected ";".
  ╷
1 │ @import "@/styles/_variables.scss"
  │  

If found this stackoverflow post that says that depending on my sass-loader version i have to change the prependData to data, where prependData is for "sass-loader": "^8.0.2" and data for "sass-loader": "^7.*.*"

I think the problem is somewhere in here as my sass-loader version is 6.13.4 according to

npm sass-loader -v

When i run npm update sass-loader i don't recieve any message, but the version is still 6.13.4

Accorging to npm the latest sass-loader version is 9.0.2

Does anyone know what am i doing wrong ?

My repository is here

Answer 1

They split scss & sass options in vue-cli 4.0.0-beta.3 see this github issue.

...
   loaderOptions: {
      scss: {
        prependData: `@import "@/styles/_variables.scss";`
      }
    }
...