Sass-loader error 'options has an unknown property 'indentedSyntax'' when upgrading Vuetify from 1.5 to 2 - vue.js

Question

I am upgrading Vuetify in my Vue CLI 3 project from version 1.5 to 2. I have followed these instructions, doing a full install. Since the upgrade, running 'npm run serve' gives me a ton of errors looking like this:
error in ./node_modules/vuetify/src/components/VGrid/_grid.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 (C:\Users\kristoffer.dahl\Documents\Prosjekter\fridgein\fridgein_fe\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
at Object.loader (C:\Users\kristoffer.dahl\Documents\Prosjekter\fridgein\fridgein_fe\node_modules\sass-loader\dist\index.js:36:28)
All errors look the same, except for the Vuetify component mentioned.
This is my package.json:
{
"name": "fridgein_fe",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-brands-svg-icons": "^5.10.2",
"#fortawesome/free-regular-svg-icons": "^5.10.2",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/vue-fontawesome": "^0.1.7",
"#vue/cli": "^3.11.0",
"#vue/cli-shared-utils": "^3.11.0",
"auth0-js": "^9.11.3",
"axios": "^0.18.1",
"dotenv": "^8.1.0",
"es6-promise": "^4.2.8",
"jquery": "^3.4.1",
"js-cookie": "^2.2.1",
"popper.js": "^1.14.7",
"register-service-worker": "^1.6.2",
"sockjs-client": "^1.3.0",
"vue": "^2.6.10",
"vue-float-action-button": "^0.4.4",
"vue-google-charts": "^0.3.2",
"vue-plugin-load-script": "^1.2.0",
"vue-router": "^3.0.2",
"vuetify": "^2.1.0",
"vuex": "^3.1.1",
"vuex-persistedstate": "^2.5.4",
"webstomp-client": "^1.2.6"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.4.0",
"#vue/cli-plugin-eslint": "^3.4.0",
"#vue/cli-plugin-pwa": "^3.11.0",
"#vue/cli-service": "^3.5.1",
"babel-eslint": "^10.0.1",
"babel-plugin-module-resolver": "^3.2.0",
"css-loader": "^2.1.1",
"deepmerge": "^4.0.0",
"eslint": "^5.0.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vuetify": "^1.0.0-beta.3",
"fibers": "^4.0.1",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"webpack": "^4.41.0"
},
This is my vue.config.js:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "~#/sass/main.scss"`
},
},
},
}
I have checked out and tried every solution presented in relevant issues on the developers' Github pages, but none has has any effect.
Has anyone else encountered this?

Answer 1

I had the same issue and fixed it by downgrading sass-loader by setting
"sass-loader": "7.3.1",
in package.json.
This was suggested on the Vuetify Discord

Answer 2

Actually you are using sass-loader 8+ and it has an option a little bit different.
Try using prependData instead of data.
Check this github issue
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "~#/sass/main.scss"`
}
}
}
}

Answer 3

Update for those using version 10+. prependData is no longer valid. However you can use additionalData as a drop-in replacement.

Answer 4

Using the webpack 5.1.3 and sass-loader version 10.0.3, I had to use a different syntax (additionalData instead of prependData), as bellow:
webpack.config.js
{
test: /\.(css|scss|sass|less)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
additionalData: '#import "assets/scss/_variables.scss";'
},
},
},
],
},
Bear in mind the syntax requires the double quotes in the path and the semicolon before the end of the single quote just as if you were writing a normal scss file.
Example:
'#import "path/_file.scss";'
In case you need to import multiple files you can use the template string symbol (``) as bellow:
{
test: /\.(css|scss|sass|less)$/,
use: [
...
{
...
options: {
sourceMap: true,
additionalData: `#import "assets/scss/_variables.scss";
#import "assets/scss/_mixins.scss";
#import "assets/scss/_misc.scss";`
},
},
},
],
},
You can also take the advantage of template string as bellow:
`#import "${path.resolve(APP_DIR, '/assets/scss/')}/_variables.scss";`
Be advised: I tried this approach to reduce bundle size and the result was terrible as when you start to see what the webpack is actually doing you return to the basic import all needed styles in your main component as sass-loader will actually prepend in multiple components the styles you inform in the additional data. In my case the bundle got 3 times it's original size.
Cheers

Answer 5

If you use NUXT you should configure like this：
//nuxt.config.js
loaders: {
less: {
lessOptions: {
javascriptEnabled: true,
modifyVars: {
'primary-color': '#5c6ac4',
'layout-body-background': '#fff'
}
}
}
}