CSS sourcemaps are missing

[Rich-Harris]

This is really just a placeholder issue to point at vitejs/vite#2830

[benmccann]

We're adding an option in Svelte (sveltejs/svelte#6835) that we will use to disable CSS sourcemaps during SSR by default in vite-plugin-svelte because they're causing issues when using environment variables in Svelte templates (#720)

[benmccann]

There's a PR for this: vitejs/vite#7173

[alexabunny]

Just curious what the status of this is - I'm more of a backend developer and don't know much about vite unfortunately. It looks like their PR for enabling sourcemap generation was merged and sveltekit uses a version of vite that has the change. However npm run dev or npm run build in my project don't generate sourcemaps for my CSS/SCSS. Is this expected still?

[benmccann]

You must enable the experimental option: https://vitejs.dev/config/#css-devsourcemap

[alexabunny]

You must enable the experimental option: https://vitejs.dev/config/#css-devsourcemap

Edit
Disregard everything below, the sourceMappingURL's actually are there when I examine page source. I was searching the output files but I guess it makes sense that they wouldn't be there since a lot of this is composed on the clientside. Also I think my browser was doing some weird caching because I had to delete the .svelte-kit folder and restart dev for it to show the maps after enabling css.devSourcemap.

The only quirk is that the CSS selectors contain random strings (for making the selector unique to that component I assume) while the map contains the original selector. Its not a huge issue, but is there a way of showing the original selector instead? Maybe this is a just a browser thing.

---

Edit - disregard this
Thanks for the quick reply. I tried this without success for either dev or build. sourceMappingURL isn't appended to css and no .map files appear in the output.

Here's my svelte.config.js ('m just using the base sveltekit demo project, with "@sveltejs/kit": "next" and "svelte": "^3.46.0.

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	compilerOptions: {
		enableSourcemap: true
	},
	kit: {
		adapter: adapter(),

		// Override http methods in the Todo forms
		methodOverride: {
			allowed: ['PATCH', 'DELETE']
		},
		vite: {
			css: {
				devSourcemap: true
			}
		}
	}
};

export default config;