How can I precompile SCSS in SvelteKit?

user_6425704 0
Viewed 1570

I'm trying to add SCSS to my SvelteKit app. It works within components; however, when I convert the default app.css into a scss file and update the import from the base application, the page loads with a FOUC.

<script context="module">
    import '../app.scss'; // Changed from .css
</script>

Is there a way to make SvelteKit precompile the styles and inline them the same way it does standard CSS files?

sveltekit svelte sass
1 Answers

You can use a SCSS import instead:

<style lang="scss" global>
    @import '../app';
</style>

The global keyword is necessary if you're importing a global layout stylesheet. If you leave it out, styles that are imported will be scoped to your component.

user_64257040
Related