Nuxtjs vuetify throwing lots of `Using / for division is deprecated and will be removed in Dart Sass 2.0.0.`

Question

Nuxtjs using vuetify throwing lots of error Using / for division is deprecated and will be removed in Dart Sass 2.0.0. during yarn dev

Nuxtjs: v2.15.6 @nuxtjs/vuetify": "1.11.3", "sass": "1.32.8", "sass-loader": "10.2.0",

Anyone know how to fix it ?

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
63 │     'md': $grid-gutter / 3,
   │           ^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 63:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import
    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter * 2, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
64 │     'lg': $grid-gutter * 2/3,
   │           ^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 64:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import
    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet

"dependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/auth-next": "5.0.0-1617968180.f699074",
    "@nuxtjs/axios": "^5.4.1",
    "@nuxtjs/gtm": "^2.3.0",
    "axios-extensions": "^3.0.6",
    "global": "^4.4.0",
    "googleapis": "^71.0.0",
    "graphql-tag": "^2.10.3",
    "jszip": "^3.2.1",
    "jwt-decode": "^3.1.2",
    "leaflet": "1.6.0",
    "leaflet-draw": "^1.0.4",
    "leaflet-editablecirclemarker": "^1.0.4",
    "leaflet-geosearch": "2.5.1",
    "leaflet.gridlayer.googlemutant": "0.9.0",
    "leaflet.heat": "^0.2.0",
    "lodash": "^4.17.15",
    "lodash-webpack-plugin": "^0.11.5",
    "lru-cache": "^6.0.0",
    "multi-download": "^3.0.0",
    "nuxt": "^2.6.3",
    "nuxt-i18n": "^6.20.1",
    "nuxt-leaflet": "^0.0.21",
    "reiko-parser": "^1.0.8",
    "sass": "1.32.8",
    "sass-loader": "10.2.0",
    "sortablejs": "1.13.0",
    "style": "^0.0.3",
    "style-loader": "^2.0.0",
    "svgo": "^2.3.0",
    "vue": "^2.6.6",
    "vue-mqtt": "^2.0.3",
    "vue-recaptcha": "^1.1.1",
    "vue-upload-component": "^2.8.19",
    "vuedraggable": "willhoyle/Vue.Draggable"
  },
  "devDependencies": {
    "@aceforth/nuxt-optimized-images": "^1.0.1",
    "@babel/preset-env": "^7.13.15",
    "@babel/runtime-corejs3": "^7.13.10",
    "@mdi/font": "^5.9.55",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/vuetify": "^1.11.3",
    "@storybook/addon-essentials": "^6.2.8",
    "@storybook/vue": "^6.2",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-pug-html": "^0.1.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-vue": "^2.0.2",
    "core-js": "3",
    "css-loader": "^5.2.1",
    "eslint": "^7.24.0",
    "eslint-config-prettier": "^8.2.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.1.2",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^7.9.0",
    "googleapis": "^71.0.0",
    "image-webpack-loader": "^7.0.1",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2",
    "minify-css-string": "^1.0.0",
    "plop": "^2.4.0",
    "prettier": "^2.2.1",
    "sass-migrator": "^1.3.9",
    "storybook": "^6.2.8",
    "storybook-readme": "^5.0.9",
    "stylus": "^0.54.8",
    "stylus-loader": "^4.0.0",
    "vue-loader": "^15.9.6",
    "vue-recaptcha": "^1.1.1",
    "vue-template-compiler": "^2.6.6",
    "vue2-leaflet": "2.5.2",
    "vue2-leaflet-editablecirclemarker": "^1.0.5",
    "vue2-leaflet-geosearch": "1.0.6",
    "vue2-leaflet-googlemutant": "^2.0.0",
    "vue2-leaflet-markercluster": "^3.1.0",
    "vuetify-loader": "^1.7.2"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ]
  }
}

Lavernlaverna

Looks like a Wont-Fix bug/implementation in Vuetify 2: From Vuetify issue #13694: This is fixed in Vuetify 3, you now have to use vuetify-loader or @vuetify/vite-plugin to change variables. Vuetify 2 is still limited to sass@~1.32 – Resurrectionist

Answer 1

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)

Transportation

See also Vuetify issue #13694. – Arawakan

Answer 2

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

Lupelupee

Answer 3

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

Athabaska

I would recommend against downgrading packages to suppress some warnings at compile time, as well as deleting package-lock to install a package. If you really want to downgrade i suggest using "npm ls sass" to detect what version is being used now and by which dependancies. then "npm install --save-dev [email protected]". check again with ls to see if the install worked or if another dependancy is in the way. Then fix that dependancy instead of bombing your repo. – Relative

Answer 4

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.

Tarpeia

This might be reasonable in a development dependency, but in this case my UI framework depends on Sass, causing my builds to break due to excessive output. This is nothing I should need to fix, and certainly should not occur after a minor version update. – Barnstorm

it's only a warning and not an error, it does not break anything. it's there to annoy you so you would fix each and every line – Tarpeia

It breaks tooling that does not expect this message to be printed in a seemingly endless loop, for instance when using Vuetify - which apparently has lots and lots and lots of places the deprecated division style is used. I'm not rambling against Sass here, but Vuetify: they should have used a more restrictive Sass version to prevent this message from ever bothering downstream devs. – Barnstorm

"but Vuetify: they should have used a more restrictive Sass version to prevent this message from ever bothering downstream devs." Winner winner, chicken dinner! vsync's answer is the "right" one if your code produces this error string. And it sounds like Vuetify could benefit from a quick patch that follows vsync's advice. ;^) Worth mentioning that the error string mentions an automated fix: More info and automated migrator: https://sass-lang.com/d/slash-div). – Westminster

For this solution, actually also work within vuetify's /node_modules/vuetify/** . but if new repo or removed node_modules it will come back. – Lavernlaverna

@Westminster vsync's answer may be correct, but that doesn't change the fact that it doesn't address this particular question. The OP is quite obviously a user of Vuetify, not one of its contributors. Providing an answer targeted at the contributors of Vuetify may be valuable in itself, but not helpful for Vuetify users. – Barnstorm

@MoritzFriedrich Yep; thanks. Looks like a typo in my previous comment: "And it sounds like Vuetify could benefit from a quick patch that follows <strike>vsync's</strike> Moritz' advice." Sans typo, I'm making exactly your distinction. Follow vsync "if your code produces this error string" and Mortiz (you) if you're a contributor for the benefit of "downstream devs". Was trying to say you (both together) were 100% on the money. – Westminster

Answer 5

This cause happened with many frontend frameworks, I personally use @nuxtjs/vuetify, and recently two days ago I faced this same problem you can see attached image to verify.

I fixed it with 1 line you can check the below steps to verify. Choose your steps according to your needs either windows or linux.

Windows 10 (localhost) steps:

1. Remove node_modules rm -r .\node_modules\
2. Remove package-lock.json rm -r .\package-lock.json
3. Add one line "sass": "1.32.13" into package.json under devDependencies section.

Linux (Production) steps:

1. Remove node_modules rm -R node_modules
2. Remove package-lock.json rm -R package-lock.json
3. Add one line "sass": "1.32.13" into package.json under devDependencies section.

Finally, the proof is attached below

Remember once nuxtjs/vuetify they release the patch of this sass version, update your package.json sass to the latest version.

Quandary

nuxt biuld is working fine, but got same errors for nuxt generate command – Triplane

show me the error or your error screenshot – Quandary

Answer 6

I did not have sass as a dependency myself, so I decided to run npm update and this issue disappeared, so this might have been fixed already by nuxt (2.15.7) or @nuxtjs/vuetify(1.12.1).

Lorica

...magical! Never has sass also! – Frowst

Answer 7

I fixed it by removing ^, from my package.json

Before

sass": "^1.32.12 

change it to After

"sass": "1.32.12" 

and npm install and then npm run prod with laravel mix.

Copper

Answer 8

Quick Fix using sass-migrator: https://github.com/sass/migrator

Use npx to run it:

npx sass-migrator division **/*.scss

Campbellite

Answer 9

No need to downgrade anything. Sass has an option to simply suppress these warnings while building. in your vue.config.js, or wherever else you configure sass:

{
  ....
  loaderOptions: {
    sass: {
      quietDeps: true
    }
  }
}

NOTE: This removes your deprecation warnings, but also other potential warnings such as unused selectors, etc.

Edit: disclaimer: of course suppressing warnings this way should only be a viable option if:

• your CI fails because of this and you nééd this combination of dependancies and there is no other way.
• your alternative would be downgrading to vulnerable package versions

Relative

Answer 10

I've installed @nuxtjs/vuetify with version ^1.0.0 and I've let yarn or npm decide which version to pick, after that I no longer have this issue.

If you want to install it simply write:

yarn add @nuxtjs/vuetify@^1.0.0 -D

or via npm

npm i @nuxtjs/vuetify@^1.0.0 --save-dev

Unfaithful