Nuxtjs vuetify throwing lots of `Using / for division is deprecated and will be removed in Dart Sass 2.0.0.`
Quick fix
Change your sass version to use the tilde ~
and it should work. This is because it will prohibit updated minor versions from being used, and allow only patches.
Example package.json line:
"sass": "~1.32.6"
See https://nodesource.com/blog/semver-tilde-and-caret/
Future-compatible fix
For those of you who want to refactor your use of /
, you need to get the style-resources module. With it, once adding '@nuxtjs/style-resources'
to your Nuxt config buildModules
, you can set hoistUseStatements: true
in a styleResources
property in the config. This will allow you to @use 'sass:math';
in your style block where you will change a/b
to math.div(a, b)
There's an issue with vuetify I think. But if you use yarn, you can use
"resolutions": {
"@nuxtjs/vuetify/**/sass": "1.32.12"
}
in package.json
.
EDIT
If you use npm, you can just simply add
"devDependencies": {
...,
"sass": "~1.32.12"
}
to package.json
Contrary to other answers here, I would like to state that this "error" can also be viewed positively and be acted upon:
It directs to this page: https://sass-lang.com/documentation/breaking-changes/slash-div
Which simply explains that the way sass worked until now was not good and from now on it asks up to "better our ways":
Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.
@use "sass:math";
// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3
// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3
And at the end of that page is offered an "automatic" migration solution
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss
Overall this whole thing sounds very reasonable and developers should seriously consider fixing all their existing code instead of "sweep under the rug" approach.
Add this line to the devDependencies in package.json
"sass": "~1.32.12"
delete node_modules folder and package-lock.json, the run
$ npm install