How to enable JS and SCSS sourcemaps with SvelteKit?

Question

I've set up a sveltekit project with scss support locally. But all the generated JS and CSS is inline.

How to generate a bundle.js and bundle.css with sourcemaps at development time?

svelte.config.js ( SvelteKit v1.0.0-next.144 )

import preprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

const config = {
    kit: {
        target: '#svelte'
    },
    preprocess: preprocess({
        scss: {
            includePaths: ['src'],
            prependData: `@import 'src/style/_config.scss';`
        },
        sourceMap: true,
    }),
    compilerOptions: {
        dev: !production
    }
};

export default config;

pixellogik pixellogik · Accepted Answer · 2021-08-11T05:37:55

Workaround:

Put SCSS files in /static/scss and generate style.css. In my case with a file watcher in phpStorm.

Reference it in /src/routes/__layout.svelte like this

<svelte:head>
    <link rel="stylesheet" href="../static/style.css">
</svelte:head>

In devtools scss files are shown next to a style, but they have nothing to do with the specific style. Sucks

How to enable JS and SCSS sourcemaps with SvelteKit?

1 Answers