SvelteKit & Sass: Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

Question

After figuring out how to get my sass starter files setup to work on a fresh new Svelte5 / SvelteKit project, i noticed that my console kept throwing multiple warnings related to the use of @import rules. i tried migrating to @use but couldn't figure this out, sveltekit would not recognize any of my variables/mixins.

Searching for ways to suppress sass warnings, i found that people have been able to accomplish this by adding the following options to the vite.config.js file:

export default defineConfig({
    plugins: [sveltekit()],
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern',
                silenceDeprecations: ['import'],
            }
        }
    }
});

however this does not seem to do anything. the options are ignored and i keep getting multiple @import related warnings in my console.

has anybody built a similar sveltekit/sass setup and found a way to suppress these warnings?

Answer 1

edited to add a real answer:

i was originally looking for a way to suppress the warnings but instead decided to figure out how to use the newer sass rules @use and @forward which are meant to replace @import.

given a sass entry file:

// src/styles/_entry.scss
@forward './fonts';
@forward './variables';

and the following sveltekit setup:

// config.svelte.js
export default {
  ...
  preprocess: sveltePreprocess({
    scss: {
      api: 'modern',
      prependData: `@use 'src/styles/_entry.scss' as *;`,
    },
    ...
  })
  ...
};

i got rid of the warnings and don't need to use namespaces with my sass variables/mixins thanks to the use of the * namespace. i am a solo dev so my chances of hitting a conflict is almost non-existent.

note: if you are working on a team you should look into namespacing your @use rules.

 

old answer: suppressed warnings

figured it out, im not sure if it was because i was using sveltePreprocess to get sass to work but i moved the two options over to my svelte.config.js file and the warnings stopped showing up in my console.

export default {
    preprocess: sveltePreprocess({
        scss: {
            api: 'modern',
            silenceDeprecations: ['import'],
            prependData: `@import 'src/styles/_head.scss';`
        },
        postcss: {
            plugins: [autoprefixer()]
        },
    }),
    ...
}