Sass styles with Vite + VitePlugin + WindiCss

[GonzaloGPF]

Hi all! First of all, thanks for so awesome library, I really love it! I'm developing an app with Vuetify and I've always imported the whole precompiled css for setting up styles, however, now I need to customize a bit imported styles because I'm using WindiCss and some styles collide. To do that, I want to use SASS instead of CSS. Reading the documentation of Vuetify and its vite-plugin, I have the following configuration:

// vite.config.js
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
    plugins: [
        vue(),
        // vuetify(), // before
        vuetify({ styles: { configFile: path.resolve(__dirname, 'resources/sass/vendor/vuetify.scss') } }), // after
    ],
    //...
});

By this way, vite-plugin will switch the styles from CSS to SASS and will use my resources/sass/vendor/vuetify.scss file as an entrypoint for variables/styles customization right?

Then, I want to disable utility classes:

// resources/sass/vendor/vuetify.scss
@use "vuetify/settings" with (
  $utilities: false,
)

Are there something wrong? With that setup, it compiles but when my vue root component loads (full of Vuetify components), It throws lot of errors like this:

[vite] Internal server error: [sass] Undefined function.
    ╷
115 │     'xs': math.div($grid-gutter, 12),
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/vuetify/lib/styles/settings/_variables.scss 115:11  @forward
  node_modules/vuetify/lib/styles/settings/_index.sass 1:1         @forward
  node_modules/vuetify/_settings.scss 1:1                          @use
  resources/sass/vendor/_vuetify.scss 2:1                          @use
  plugin-vuetify:components/VSnackbar/VSnackbar.sass 1:1          root stylesheet
  Plugin: vite:css
  File: /var/www/html/node_modules/vuetify/lib/styles/settings/_variables.scss:115:11
  Error: Undefined function.
      ╷
  115 │     'xs': math.div($grid-gutter, 12),
      │           ^^^^^^^^^^^^^^^^^^^^^^^^^^
      ╵

I havent found a way to make this works. I always end with same error. I don't know if I'm missing some step.

Please help, Thanks!

[KaelWD]

Are you using sass or node-sass? What version?

[GonzaloGPF]

Hi! I got this in my package.js

{
    "devDependencies": {
        "sass": "~1.32",
        "sass-loader": "^12.1.0",
        "vite-plugin-vuetify": "^1.0.2"
    },
    "dependencies": {
        "vue": "^3.2.25",
        "vuetify": "^3.0.0"
    }
}

[KaelWD]

You can/should use the latest version of sass now, that was a vuetify 2 limitation.

[GonzaloGPF]

Great! That did the trick! All is working fine now. Thanks you!