How come it can't generate sourcemaps for css?

[thany]

Trying to get it to output some kind of sourcemap (anything really at this point) for css. Nothing is working so far. I've set every concievable sourcemap flag to true. I wonder how many more flags it needs.

This is the config, stripped to relevant parts:

import { defineConfig } from 'vite';
import { resolve, extname } from 'path';

import { includePaths as normaliseIncludePaths } from 'node-normalize-scss';

export default defineConfig({
    build: {
        outDir: settings.output.build,
        emptyOutDir: false,
        rollupOptions: {
            input: {
                main: resolve(__dirname, settings.input.javascript),
                styles: resolve(__dirname, settings.input.sass),
            },
            output: {
                entryFileNames: 'javascript/[name].js',
                chunkFileNames: 'javascript/[name].js',
                assetFileNames: '[name][extname]',
            },
        },
        sourcemap: true,
        cssCodeSplit: false,
        minify: false,
    },
    css: {
        devSourcemap: true,
        preprocessorOptions: {
            scss: {
                sourceMap: true,
                sourceMapIncludeSources: true,
            },
        },
    },
});

You'd think one of those sourcemap flags would make it generate sourcemaps, right? Well, nothing. Nothing at all. Not even a file in the wrong location or with incorrect source paths. Just absolutely buggerall, I think is the technical term.

I also can't know what isn't generating the sourcemaps, and what should be generating sourcemaps. Is it sass-embedded? Is it Rollup? Is it Vite itself? No idea where neither the responsibility is, nor where the hiccup is happening.

Javascript sourcemaps work fine. They worked fine by just adding sourcemap: true and that was it. Why is it so difficult for Sass? And what should I add to make it work please?

[travisbreaks]

CSS sourcemaps in Vite have a separate flag from JS: css.devSourcemap. Your config needs:

css: { devSourcemap: true }

This only applies in dev mode. For production builds, build.sourcemap does not extend to CSS. PostCSS transforms can strip the map mid-pipeline even when Vite is configured to keep it.

If you're using a PostCSS plugin, check that plugin's sourcemap passthrough config. Some plugins drop the map regardless of Vite's setting.

[thany]

I need it for vite build, which may be assumed a production build, but it's used for development. I don't need the dev server.

I don't know that I'm using a PostCSS plugin, or that I'm using PostCSS at all to be fair. I'm using Sass, but I've already added all sourcemappey-type flags that I could find, so something along the lines is either not generating them, or dropping them.

If only there would be build with extra detailed debug output, where it might reveal what the hecko is happening internally. It currently feels like a bit of a black box that "just works", which is a pain when it doesn't.

[travisbreaks]

For vite build, build.sourcemap: true is the right flag and it covers CSS including Sass-compiled output. If you have that set and still no maps, a few things to check:

1. Verify the maps aren't there silently
   Look in the build output for .css.map files, and check the bottom of the compiled .css for a /# sourceMappingURL= comment. Sometimes they generate but aren't consumed by your tooling.

2. Try 'inline' to rule out file linking issues

build: { sourcemap: 'inline' }
This embeds the map directly in the CSS. If it shows up inline but not as a separate file, it's a linking issue, not a generation issue.

3. Force dev behavior via build mode

vite build --mode development
This skips minification and some transforms that can drop maps mid-pipeline.

4. Sass preprocessor options
   You may need to explicitly enable maps at the Sass level:

css: {
preprocessorOptions: {
scss: { sourceMap: true }
}
}
5. Debug output
Vite uses the debug package internally. Prefix your build with:

DEBUG=vite:* vite build 2>&1 | grep -i sourcemap
It's noisy, but it reveals what Vite is doing at each transform step.

[thany]

It would be very embarassing if I didn't check if the files aren't actually there... No they aren't :)

The inline option, as well as the preprocessorOptions I had already tried to no avail. Like I mentioned, I've tried a host of sourcemap-related options.

As for development mode... What if I want sourcemaps for production? They are very useful on a test or acceptance environment! I can try this switch just to check if it works, but if it does, I would consider it a bug, because sourcemap: true means I want sourcemaps no matter what (which WORKS, for javascript only)

I'll try the other things you mentioned shortly.

[Sagargupta16]

[thany]

I'm not sure what you're referring to. I don't need any env variables, and I don't need any proxy.

Besides, sourcemaps should "just work" with sane defaults. It shouldn't require a whole bunch of configuration. It's not 2010 anymore, and this is not Gulp or Webpack.