trying ignore `mixed-decls` warning but still got these warning in Vite(`5.3.1`).

[daiwanxing]

just now upgrade my dependency of sass to the latest version (1.77.8) and restart, the app terminal output some warnings that i've never got.

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

I have no time to solve these warnings, the easily way to me is make these warnings keep silence.

I followed the document instructions. but it's not work, I still got bunch of warnings. Is there something wrong with my configuration?

// vite.config.js
css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ["mixed-decls"],
      },
    },
},

[jathak]

The deprecations options are only available in the modern JS API.

Vite is still using the legacy JS API, so you'll need to wait until https://github.com/vitejs/vite/issues/7116 is resolved to use these flags.

[Kamil-Jasinski]

Hi, @daiwanxing you can try this:

*vite.config.js

const SCSS_Logger = {
    warn(message, options) {
        // Mute "Mixed Declarations" warning
        if (options.deprecation && message.includes('mixed-decls')) {
            return
        }
        // List all other warnings
        console.warn(`▲ [WARNING]: ${message}`);
    },
};

export default defineConfig({
    plugins: [],
    css: {
        preprocessorOptions: {
            scss: {
                logger: SCSS_Logger,
            },
        },
    },
});

[daiwanxing]

Hi, @daiwanxing you can try this:

*vite.config.js

const SCSS_Logger = {
    warn(message, options) {
        // Mute "Mixed Declarations" warning
        if (options.deprecation && message.includes('mixed-decls')) {
            return
        }
        // List all other warnings
        console.warn(`▲ [WARNING]: ${message}`);
    },
};

export default defineConfig({
    plugins: [],
    css: {
        preprocessorOptions: {
            scss: {
                logger: SCSS_Logger,
            },
        },
    },
});

Thank you, this is a good workaround!

[replete]

Finally a workaround, I wish this was clear in the documentation that scss support is not up to date and so preprocessorOptions wont work as expected.

[supermueller]

You have to use at leaset the "modern" API:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern',
        silenceDeprecations: ['mixed-decls'],
      },
    }
  }
}

See also Shared Options | Vite.