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"     ]   } } 

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)