Dart Sass 3 support?

[ralf57]

Hello,
I'm using this module in a Nuxt 2 project.
The module version is 1.2.2, along with "sass" and "sass-loader" packages.
The configuration is:

styleResources: {
    scss: ['./globals/index.scss'],
    hoistUseStatements: true,
  },

All of a sudden, I've started having hundreds of deprecation warnings like:

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import

so I replaced all the @import statements with @use.
This made most deprecation warnings go but the app does not build anymore.
The Sass variables used in the .scss and in the Vue components file are undefined.

Do you have an idea or a suggestion?

[ralf57]

I ended up silencing the warnings with the following config in the nuxt.config.ts file:

build: {
  extend: (config: any, ctx: any) => {
    ctx.loaders.scss ||= {}
    ctx.loaders.scss.sassOptions ||= {}
    if (typeof ctx.loaders.scss.sassOptions === 'object') {
      ctx.loaders.scss.sassOptions.silenceDeprecations = [
        'global-builtin',
        'import',
        'legacy-js-api',
        'color-functions',
      ]
    }
  },
},

but Style Resources should be adapted to get Dart Sass 3 compatibility.