sasssveltekitsvelte-5

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


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?


Solution

  • 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, warning w/suppression:

    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()]
            },
        }),
        ...
    }