10

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?

Improve this question

5 Answers 5

Reset to default
20

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This was it, thank you. I had previously tried 7.0.0, but 7.3.1 did the trick.
Hi! You don't need to downgrade sass-loader. Just use the new property prependData instead of data. Check this Github Issue
18

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"` } } } }
Improve this answer

4 Comments

I needed to add ; at the end for it to work like this: prependData: @import "~@/sass/main.scss"; Otherwise great solution.
Great @Perp. I just used String Template in case somebody add more @import.
How do I do this with nuxt?
Please note stackoverflow.com/a/64231359/414385
14

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

Improve this answer

Comments

6

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

Improve this answer

Comments

1

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' } } } }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.