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