{"id":531,"hash":"e7edf338c71d190b1e0770427fcb24fb3c0fc8d900e09c9a522002fc79d534e4","pattern":"Nuxtjs vuetify throwing lots of `Using / for division is deprecated and will be removed in Dart Sass 2.0.0.`","full_message":"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\n\nNuxtjs: v2.15.6\n@nuxtjs/vuetify\": \"1.11.3\",\n\"sass\": \"1.32.8\",\n\"sass-loader\": \"10.2.0\",\n\nAnyone know how to fix it ?\n\n: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.\n\nRecommendation: math.div($grid-gutter, 3)\n\nMore info and automated migrator: https://sass-lang.com/d/slash-div\n\n   ╷\n63 │     'md': $grid-gutter / 3,\n   │           ^^^^^^^^^^^^^^^^\n   ╵\n    node_modules/vuetify/src/styles/settings/_variables.scss 63:11  @import\n    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import\n    node_modules/vuetify/src/styles/styles.sass 2:9                 @import\n    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import\n    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet\n\n: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.\n\nRecommendation: math.div($grid-gutter * 2, 3)\n\nMore info and automated migrator: https://sass-lang.com/d/slash-div\n\n   ╷\n64 │     'lg': $grid-gutter * 2/3,\n   │           ^^^^^^^^^^^^^^^^^^\n   ╵\n    node_modules/vuetify/src/styles/settings/_variables.scss 64:11  @import\n    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import\n    node_modules/vuetify/src/styles/styles.sass 2:9                 @import\n    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import\n    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet\n\n\"dependencies\": {\n    \"@nuxtjs/apollo\": \"^4.0.1-rc.5\",\n    \"@nuxtjs/auth-next\": \"5.0.0-1617968180.f699074\",\n    \"@nuxtjs/axios\": \"^5.4.1\",\n    \"@nuxtjs/gtm\": \"^2.3.0\",\n    \"axios-extensions\": \"^3.0.6\",\n    \"global\": \"^4.4.0\",\n    \"googleapis\": \"^71.0.0\",\n    \"graphql-tag\": \"^2.10.3\",\n    \"jszip\": \"^3.2.1\",\n    \"jwt-decode\": \"^3.1.2\",\n    \"leaflet\": \"1.6.0\",\n    \"leaflet-draw\": \"^1.0.4\",\n    \"leaflet-editablecirclemarker\": \"^1.0.4\",\n    \"leaflet-geosearch\": \"2.5.1\",\n    \"leaflet.gridlayer.googlemutant\": \"0.9.0\",\n    \"leaflet.heat\": \"^0.2.0\",\n    \"lodash\": \"^4.17.15\",\n    \"lodash-webpack-plugin\": \"^0.11.5\",\n    \"lru-cache\": \"^6.0.0\",\n    \"multi-download\": \"^3.0.0\",\n    \"nuxt\": \"^2.6.3\",\n    \"nuxt-i18n\": \"^6.20.1\",\n    \"nuxt-leaflet\": \"^0.0.21\",\n    \"reiko-parser\": \"^1.0.8\",\n    \"sass\": \"1.32.8\",\n    \"sass-loader\": \"10.2.0\",\n    \"sortablejs\": \"1.13.0\",\n    \"style\": \"^0.0.3\",\n    \"style-loader\": \"^2.0.0\",\n    \"svgo\": \"^2.3.0\",\n    \"vue\": \"^2.6.6\",\n    \"vue-mqtt\": \"^2.0.3\",\n    \"vue-recaptcha\": \"^1.1.1\",\n    \"vue-upload-component\": \"^2.8.19\",\n    \"vuedraggable\": \"willhoyle/Vue.Draggable\"\n  },\n  \"devDependencies\": {\n    \"@aceforth/nuxt-optimized-images\": \"^1.0.1\",\n    \"@babel/preset-env\": \"^7.13.15\",\n    \"@babel/runtime-corejs3\": \"^7.13.10\",\n    \"@mdi/font\": \"^5.9.55\",\n    \"@nuxtjs/eslint-config\": \"^6.0.0\",\n    \"@nuxtjs/vuetify\": \"^1.11.3\",\n    \"@storybook/addon-essentials\": \"^6.2.8\",\n    \"@storybook/vue\": \"^6.2\",\n    \"@vue/cli-plugin-eslint\": \"^4.5.12\",\n    \"babel-core\": \"^6.26.3\",\n    \"babel-eslint\": \"^10.0.1\",\n    \"babel-loader\": \"^8.0.6\",\n    \"babel-plugin-lodash\": \"^3.3.4\",\n    \"babel-plugin-transform-pug-html\": \"^0.1.3\",\n    \"babel-plugin-transform-runtime\": \"^6.23.0\",\n    \"babel-polyfill\": \"^6.26.0\",\n    \"babel-preset-vue\": \"^2.0.2\",\n    \"core-js\": \"3\",\n    \"css-loader\": \"^5.2.1\",\n    \"eslint\": \"^7.24.0\",\n    \"eslint-config-prettier\": \"^8.2.0\",\n    \"eslint-config-standard\": \"^16.0.2\",\n    \"eslint-loader\": \"^4.0.2\",\n    \"eslint-plugin-html\": \"^6.1.2\",\n    \"eslint-plugin-import\": \"^2.16.0\",\n    \"eslint-plugin-node\": \"^11.1.0\",\n    \"eslint-plugin-prettier\": \"^3.4.0\",\n    \"eslint-plugin-promise\": \"^5.1.0\",\n    \"eslint-plugin-standard\": \"^5.0.0\",\n    \"eslint-plugin-vue\": \"^7.9.0\",\n    \"googleapis\": \"^71.0.0\",\n    \"image-webpack-loader\": \"^7.0.1\",\n    \"imagemin-mozjpeg\": \"^9.0.0\",\n    \"imagemin-pngquant\": \"^9.0.2\",\n    \"minify-css-string\": \"^1.0.0\",\n    \"plop\": \"^2.4.0\",\n    \"prettier\": \"^2.2.1\",\n    \"sass-migrator\": \"^1.3.9\",\n    \"storybook\": \"^6.2.8\",\n    \"storybook-readme\": \"^5.0.9\",\n    \"stylus\": \"^0.54.8\",\n    \"stylus-loader\": \"^4.0.0\",\n    \"vue-loader\": \"^15.9.6\",\n    \"vue-recaptcha\": \"^1.1.1\",\n    \"vue-template-compiler\": \"^2.6.6\",\n    \"vue2-leaflet\": \"2.5.2\",\n    \"vue2-leaflet-editablecirclemarker\": \"^1.0.5\",\n    \"vue2-leaflet-geosearch\": \"1.0.6\",\n    \"vue2-leaflet-googlemutant\": \"^2.0.0\",\n    \"vue2-leaflet-markercluster\": \"^3.1.0\",\n    \"vuetify-loader\": \"^1.7.2\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\",\n      \"ie 11\"\n    ]\n  }\n}","ecosystem":"npm","package_name":"sass","package_version":null,"solution":"Quick fix\nChange 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.\n\nExample package.json line:\n\n\"sass\": \"~1.32.6\"\n\nSee https://nodesource.com/blog/semver-tilde-and-caret/\n\nFuture-compatible fix\nFor 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)","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/67631879/nuxtjs-vuetify-throwing-lots-of-using-for-division-is-deprecated-and-will-be","votes":103,"created_at":"2026-04-19T04:51:19.420032+00:00","updated_at":"2026-04-19T04:51:19.420032+00:00"}