97

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"
    ]
  }
}
kwong ho
  • 973
  • 1
  • 6
  • 7
  • 2
    Looks like a Wont-Fix bug/implementation in Vuetify 2: From Vuetify issue [#13694](https://github.com/vuetifyjs/vuetify/issues/13694#issuecomment-907768247): `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` – PotatoFarmer Jan 11 '22 at 00:58

10 Answers10

88

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)

Jonathan
  • 10,936
  • 8
  • 64
  • 79
41

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

Khoa Nguyen
  • 1,319
  • 7
  • 21
Mani Mirjavadi
  • 973
  • 9
  • 19
19

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.

vsync
  • 118,978
  • 58
  • 307
  • 400
  • 4
    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. – Moritz Friedrich Jun 01 '21 at 13:29
  • 1
    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 – vsync Jun 01 '21 at 19:05
  • 4
    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. – Moritz Friedrich Jun 01 '21 at 21:39
  • 1
    "_but Vuetify: they should have used a more restrictive Sass version to prevent this message from ever bothering downstream devs._" [Winner winner, chicken dinner](https://www.reference.com/world-view/winner-winner-chicken-dinner-mean-4f747ebf4e42a2bc)! 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](https://sass-lang.com/d/slash-div)). – ruffin Jun 01 '21 at 21:48
  • For this solution, actually also work within vuetify's /node_modules/vuetify/** . but if new repo or removed node_modules it will come back. – kwong ho Jun 03 '21 at 12:09
  • 2
    @ruffin 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. – Moritz Friedrich Jul 29 '21 at 13:18
  • @MoritzFriedrich Yep; thanks. Looks like a typo in my previous comment: "_And it sounds like Vuetify could benefit from a quick patch that follows vsync's **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. – ruffin Jul 29 '21 at 14:58
18

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
Amir Daneshkar
  • 771
  • 3
  • 9
  • 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 sass@1.32.12". 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. – Rutger Jan 31 '23 at 19:05
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.

your-actual-error-image

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.

change-package.json-file

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.

working-image-solution

Zoe
  • 27,060
  • 21
  • 118
  • 148
Piyush Dolar
  • 95
  • 4
2

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).

cprcrack
  • 17,118
  • 7
  • 88
  • 91
1

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.

Jorge
  • 485
  • 4
  • 15
1

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

Use npx to run it:

npx sass-migrator division **/*.scss
Johnatan Brayan
  • 171
  • 2
  • 4
0

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
Freestyle09
  • 4,894
  • 8
  • 52
  • 83
0

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
Rutger
  • 131
  • 1
  • 4