Kevin Powell - Community•16mo ago

SvelteKit and Sass setup?

Hi! I am setting up a new project that uses Sass in SvelteKit, and I am trying to find examples of config setup and file organization. I've only used Sass with vanilla JavaScript, TypeScript and React projects, nothing full-stack. If anybody knows of any helpful walkthroughs or projects I could look through on GitHub I would love that advice. There's so many plugins and config files I'm worried I'll get stuck and not be able to debug otherwise. Thanks!

49 Replies

b1mind•16mo ago

So because SvelteKit is just a Vite plugin you can its pretty simple. Vite already supports Sass out the box and you just use its preprocessor for svelte. svelte.config.js

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

//then add it to the config

const config = {
    kit: {
      adapter: adapter()
    },
    preprocess: [vitePreprocess()]
}

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

//then add it to the config

const config = {
    kit: {
      adapter: adapter()
    },
    preprocess: [vitePreprocess()]
}

so now you can import sass files into your layout lets say.

<script>
    import '$lib/sass/global.scss';
</script>

*use style you have to tell it
<style lang="scss">
// you can also now use sass use here to import

</style>

<script>
    import '$lib/sass/global.scss';
</script>

*use style you have to tell it
<style lang="scss">
// you can also now use sass use here to import

</style>

oh don't forget to install pnpm i -D sass to your project if you have not either

elbi3OP•16mo ago

ok I think I am starting to understand, there's also a vite.config.js file to setup too? (this is extremely helpful, thank you)

b1mind•16mo ago

Yea you should have two configs one for svelte one for vite.

elbi3OP•16mo ago

(and then a postcss.config.js, I'm sometimes not sure where to put configuration based on docs) ok good then I'm not too far off in the weeds

b1mind•16mo ago

yup! if you use postcss plugins which you should lots of good postcss plugins depending on your needs.

elbi3OP•16mo ago

yes I really want to, just setting expectations 😅

b1mind•16mo ago

Vite is all setup to use it though so you just edit that config. SvelteKit you will see in the vite.config is just a plugin 😄 so if you want to use other vite plugins it should work pretty well.

elbi3OP•16mo ago

ok thank you, I think I've mixed these two files contents' a bit but this will help me sort it out

b1mind•16mo ago

long as its not like framework specific. Its nice separation honestly, it was not like that during beta. Just think each one has a config aptly named. Which is how it should be 😄

elbi3OP•16mo ago

would it be okay if I posted my cofigs here once I've fixed them?

b1mind•16mo ago

Sidenote: if you use vsCode it has a nice way to combine like files. I just have all my configs/rc files collapsed into one. same with ignore and package xD

elbi3OP•16mo ago

oh is it an extension?

b1mind•16mo ago

elbi3OP•16mo ago

thanks (I'm just taking a lot of screenshots because my brain is pudding at this point) vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import { sveltePreprocess } from 'svelte-preprocess/dist/autoProcess';
import htmlPurge from "vite-plugin-purgecss";

export default defineConfig({
    plugins: [
        sveltekit({
            preprocess: sveltePreprocess({
                postcss: {},
                scss: {},
                sass: {},
            })
        }),
        htmlPurge({}),
    ],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import { sveltePreprocess } from 'svelte-preprocess/dist/autoProcess';
import htmlPurge from "vite-plugin-purgecss";

export default defineConfig({
    plugins: [
        sveltekit({
            preprocess: sveltePreprocess({
                postcss: {},
                scss: {},
                sass: {},
            })
        }),
        htmlPurge({}),
    ],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

b1mind•16mo ago

that is old I mean you can still use Svelte preprocessor but its old and no longer maintained by the team I'm pretty sure. The default is now to use Vites straight out.

elbi3OP•16mo ago

(sorry trying to figure out how to make it look like JavaScript) ok, I'll just use the vite plugins

b1mind•16mo ago

```js did you do a fresh install? cause that is some old config options there.

elbi3OP•16mo ago

nothing since we've started chatting

b1mind•16mo ago

ah following a guide?

elbi3OP•16mo ago

I was trying to follow docs, but clearly the wrong one

b1mind•16mo ago

yea which that is what I'm trying to learn so we can get it fixed xD

elbi3OP•16mo ago

for the docs or this project? I think I manually entered a lot of that, but I'll look through my browser history because I've been on too many to remember which one at this point

elbi3OP•16mo ago

might have been this: https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md#auto-preprocessing

GitHub

svelte-preprocess/docs/preprocessing.md at main · sveltejs/svelte-p...

A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more. - sveltejs/svelte-preprocess

elbi3OP•16mo ago

But the way you explained it makes sense, to just use the Vite plugins since SvelteKit is running on Vite *is a Vite plugin I mean

b1mind•16mo ago

yea they made that switch during beta. Which was smart choice cause now its abstracted away and you don't need some special svelte way. hence they switched to Vite preprocessor by default now 😄

elbi3OP•16mo ago

I love Vite so much, glad it's getting adopted everywhere I see you did Kevin's BeyondCSS course, I'm essentially trying to port my Sass starter template into a SvelteKit project

b1mind•16mo ago

Oh nice!

elbi3OP•16mo ago

so some of my setup is from that, if it adds context

b1mind•16mo ago

Yea I beta tested it but have to be honest I have not taken it really 😦 Def going to do the last model though 🙂 Also I made the converter used in the course >.>;; in SvelteKit

elbi3OP•16mo ago

oohhhh really?

b1mind•16mo ago

yup!

elbi3OP•16mo ago

that sounds like a lot of work

b1mind•16mo ago

At the time sass only had the node compiler so it was perfect for it

elbi3OP•16mo ago

I did not care about sass before that course, but now I'm invested because of the token maps

b1mind•16mo ago

heheheh

elbi3OP•16mo ago

thanks for helping me with this are you on GitHub?

b1mind•16mo ago

same handle yea I'm b1mind everywhere

elbi3OP•16mo ago

I will peek at your converter

b1mind•16mo ago

oh that wont be public I don't keep any client work public and well Kevin was a client lol its his code now

elbi3OP•16mo ago

ohhh no worries well it's nice to get work like that

b1mind•16mo ago

Also it was early beta things are done pretty different. It wouldn't help much into SvelteKit but I have other stuff up that is public that might feel free. I'm working with Prismic right now and enjoying it some in my free time. Looking forward to seeing how well TinaCMS and Kit do in Kevins last model though. I will def be taking that part of the course. Then might go back into it for me to see how he does design systems in sass.

elbi3OP•16mo ago

I keep forgetting there's going to be more, i'm excited for that

b1mind•16mo ago

me too! Congrats on completing it btw 💪 Was a big course 😮

elbi3OP•16mo ago

thanks! that's what gives me the dopamine, finishing the course

b1mind•16mo ago

hell yea love that high I'm kinda on one right now learning Prismic CMS hehe

elbi3OP•16mo ago

I'll have to look that up

b1mind•16mo ago

Need to get back into it They just recently launched some decent Kit support only to get better so.

elbi3OP•16mo ago

their UI is really cute homepage I mean @b1mind just looking at some of your stuff on Github and it's answered a lot of minor questions I had (like file organization, where to put locally hosted fonts) 🙏 It's my first time setting up a svelte project, and sometimes "reading" somebody else's project gives better context than following tutorials. Sorry shouldn't have done the @

b1mind•16mo ago

its fine glad that helps!

Gaming

Programming

SvelteKit and Sass setup?