DEV Community

loading...

Discussion on: a first look at svelteKit part 2 - layout, routes

Collapse
krupalpatel92 profile image
Krupal Patel

Hey Anthony,

I'm new at SvelteJs and started with SvelteKit kit.svelte.dev/docs I'm here to get help to configure SCSS with SvelteKit. Everywhere I found is install svelte-preprocess & node-sass then some settings on rollup.config.js but its not exists under SvelteKit project or maybe it's only part of SvelteJs not kit or maybe a different version of Svelte.

I'm just trying to configure SCSS in SvelteKit.

Collapse
ajcwebdev profile image
anthony-campolo Author

Hey Krupal, that's a really great question. I'm a terrible frontend developer and don't know anything about CSS, so I forwarded this question to the SvelteKit Discord server and received the following response, hopefully it is helpful:

I've got svelte-preprocess and sass in my devDependencies

In svelte.config.js:

import sveltePreprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: sveltePreprocess(),
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
  },
};

export default config;
Enter fullscreen mode Exit fullscreen mode

I just upgraded sveltekit and had to update that from original the .cjs file. IIRC the other difference from svelte is that you add a different attribute on your style tag to mark it as scss: <style lang="scss">

Forem Open with the Forem app