[Bug Report][2.5.0] New Sass Deprecation Recommended

[Daniel4Digital]

Environment

Vuetify Version: 2.5.0
Vue Version: 2.6.12
Browsers: Chrome 90.0.4430.212
OS: Windows 10

Steps to reproduce

npm run build

Expected Behavior

Should not give warnings about sass

Actual Behavior

gives a lot of recommendations warnings of near future deprecated syntax

Reproduction Link

https://codesandbox.io/s/nuxtjs-vuetify-forked-nrfuw

[grreeenn]

same here. Got 64 warnings about using / for division, like this one:

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

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

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

   ╷
62 │     'sm': $grid-gutter / 6,
   │           ^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 62: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/VDataTable/_variables.scss 1:9  @import
    stdin 2:9                                                           root stylesheet

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

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

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

Happened after I started using treeshaking (imported Vuetify from vuetify/lib, as ped documentation).

Fresh install

[jacekkarczmarczyk]

use node sass < 1.33 as workaround

[grreeenn]

@jacekkarczmarczyk I've just changed to sass as per this comment.

node-sass didn't work at all

[jacekkarczmarczyk]

yeah a meant dart sass, updated my comment

[grreeenn]

@jacekkarczmarczyk it worked, thanks :)

[Oleksii14]

@KaelWD sorry, my bad. I have installed a bad version of sass.
My current versions:

sass - 1.34.0
vuetify - 2.5.1

No warnings!

UPD:

Warnings will persist since vue v2.6.12 does not support sass-loader v11

[KaelWD]

I'm reverting the fix for this, it completely broke projects that were injecting custom sass variables (#13737). To silence the warnings, install sass@~1.32

If you have any other questions, please join the Discord chat room.

---

Why is this marked as wontfix?

SASS has deprecated a very widely-used feature with no option to disable the deprecation notice (sass/dart-sass#1408, sass/sass#3065). The replacement for this (math.div()) is not compatible with the old @import module system as @use has to be the first statement in a file.
In v2.5.2 I attempted to replace @import with @use everywhere but this ended up not being viable as it breaks existing variable injection with @import, and breaks multiple variable injection as @use can only define each variable once.
Fixing these problems requires either changes to the SASS spec (unlikely), or a complete rethink of how we use SASS modules - possibly including custom loaders for webpack and rollup.

[KaelWD]

This is fixed in Vuetify 3, you now have to use webpack-plugin-vuetify or vite-plugin-vuetify to change variables. Vuetify 2 is still limited to sass@~1.32