"/" as divide symbol deprecated in latest sass release - build errors

[bbialas]

Module version
1.11.3

Describe the bug
After installing latest version of this module, it downloaded as dependency latest version of SASS which is 1.33.0.
In this sass version, they introduced braking change and deprecated / as divider symbol in favour of math.div().

Now during build, it throws errors like:

: 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/styles/elements/_code.sass 1:9         @import
    node_modules/vuetify/src/styles/elements/_index.sass 2:9        @import
    node_modules/vuetify/src/styles/main.sass 8:9                   root stylesheet

To Reproduce
Just install latest version of this module.

Expected behavior
Long term solution would be to replace / with math.div() in the whore repo.
Quick fix could be to change package.json and lock sass dependency to version 1.32.12

[Calion54]

I get the same error with "@nuxtjs/vuetify": "1.11.2" and "nuxt": "2.15.6"

[Heniker]

If you use Yarn you can put

"resolutions": {
  "@nuxtjs/vuetify/**/sass": "1.32.12"
},

in your package.json and it should work.

[a1xon]

Same Error with "@nuxtjs/vuetify": "1.11.3" and "nuxt": "2.15.6"

[frama21]

i got same error here how to fix it?
i use nuxt: 2.15.3 @nuxtjs/vuetify: 1.11.3 and nuxt typescript.

when i use treeShake: true it's get the error like @bbialas said.
but if i not use treeShake it's working & not get the error

[bbialas]

The temporary solution proposed by @Heniker works perfectly, thank you.

package.json

"resolutions": {
  "@nuxtjs/vuetify/**/sass": "1.32.12"
}

[erikeuserr]

For regular NPM users there is another solution available (as a temporary fix).

• Install npm-force-resolutions.
• Add "preinstall": "npx npm-force-resolutions" to your npm scripts.
• Add below to package.json:

"resolutions": {
	"sass": "1.32.12"
}

[tabuz]

@erikeuserr In order this to work for me with Nuxt + Vuetify + npm I had to use

"resolutions": {
  "@nuxtjs/vuetify/**/sass": "1.32.12"
}

instead of what you suggest

"resolutions": {
	"sass": "1.32.12"
}

But it works. Thank you!

[thomasvogelaar]

If you use Yarn you can put

"resolutions": {
  "@nuxtjs/vuetify/**/sass": "1.32.12"
},

in your package.json and it should work.

This doesn't seem to work in my monorepo project, unfortunately.

[krkaa]

I have the same error. is there a solution to this problem?
i use nuxt: 2.15.6 && @nuxtjs/vuetify: 1.11.3

[frama21]

this my step to handle this error for now

1. in your package.json add

"preinstall": "npx npm-force-resolutions"

inside the scripts section

2. add

"resolutions": {
  "sass": "1.32.12"
},

below your scripts section

3. after that run command npm i after finish run again your project and voila the error was gone

if you dont understand my step this my package.json

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "preinstall": "npx npm-force-resolutions" // preinstall goes here
  },
  "resolutions": {   // resolutions goes here
    "sass": "1.32.12"
  },
  "dependencies": {
  // some dependencies
  }

after that run command npm i or npm install after finish run again your project

[SocketSomeone]

Same problem with monorepo

[rahulkumarsingh73690]

Temporary solution for NPM users:

npm i [email protected]

No need to change anything but if you still face issue then treeShake: false

[Tobeyforce]

Temporary solution for NPM users:

npm i [email protected]

No need to change anything but if you still face issue then treeShake: false

This worked for me.

[rahulkumarsingh73690]

@clarkdo @atinux @pi0

Please fix this issue or provide a permanent solution :)

[xolott]

I'd tried to force Vuetify version 2.5.2 which address this issue, adding to my package.json

"devDependencies": {
    ...
    "vuetify": "2.5.2",
    "sass": "1.34.0",
    "sass-loader": "10.2.0"
}

No luck. It outputs multiple SassError: @use rules must be written before any other rules.

ERROR in ./node_modules/vuetify/src/components/VBanner/VBanner.sass
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: @use rules must be written before any other rules.
  ╷
4 │ @use 'sass:math'
  │ ^^^^^^^^^^^^^^^^
  ╵
  node_modules/vuetify/src/components/VBanner/VBanner.sass 4:1  root stylesheet

But the actual file contains nothing before @use 'sass:math'

1| // Imports
2| @use 'sass:math'

I assume that maybe there is some loader prepending something before the file content.

Using this solves the error but keeps the division warnings

{
    ...
    "vuetify": "2.4.2",
    "sass": "1.32.8"
}

[mostafaznv]

this worked for me:

"devDependencies": {
    "@nuxtjs/vuetify": "^1.11.3",
    "sass": "~1.32.13",
    "sass-loader": "^10.1.1"
}