Stabilizing css.devSourcemap

[patak-dev]

css.devSourcemap

• Added in [email protected] as opt-in
• Original PR
• Docs

Starting a discussion to gather feedback about this feature, so we can move it out of experimental in a future version of Vite. We should also discuss its default value too.

[usizu]

I can't seem to get this to generate any css source maps at all.
my vite.config.js:

build: {
    //...
    sourcemap: true,
    css: {
      devSourcemap: true,
      preprocessorOptions: {
        less: {
          sourceMap: true,
        },
      },
    },

with less installed.

[patak-dev]

Leaving here a comment that we should wait to stabilize this option. We're working on a new API surface that includes a new dev grouping of config options:

• feat: environment api #16129

Instead of ccs.devSourcemap, this option should probably be called dev.sourcemap: boolean | { js: boolean, css: boolean }

[return42]

Instead of ccs.devSourcemap, this option should probably be called dev.sourcemap: boolean | { js: boolean, css: boolean }

@patak-dev The PR you mentioned is merged, but I can't find a dev.sourcemap in the docs (neither an option section named dev.) .. do you know the current state of options to

I can't seem to get this to generate any css source maps at all.

@usizu: same here, I tried to set

• build.sourcemap = true and
• css.preprocessorOptions.less.sourceMap = true and
• css.devSourcemap = true

.. without any luck .. a .css.map file isn't created .. how did you solved this problem?

Not sure its related, but I'm using LESS files .. here is my config / what I have tried without luck.

  css: {
    devSourcemap: true,
    preprocessorOptions: {
      less: {
        sourceMap: {
          outputSourceFiles: true,
          sourceMapURL: (name) => { const s = name.split('/'); return s[s.length - 1] + '.map'; },
        },
      },
    },
  },

  build: {
    manifest: "manifest.json",
    emptyOutDir: true,
    sourcemap: true,

    rollupOptions: {
      input: {
        "css/style.css": PATH.src + "/less/style.less",
      },

      output: {
        entryFileNames: "[name].js",
        chunkFileNames: "[name].js",
        assetFileNames: "[name].[ext]",
        // Vite does not support "rollupOptions.output.sourcemap". Please use "build.sourcemap" instead.
        // sourcemap: true,
      },
    },
  },

[jrochkind]

This used to work with me as css.devSourcemap but at some point in the past some months stopped working.

I'm currently using vite 5.4.12

Is css.devSourcemap supposed to work to get SASS sourcemaps in this version? Is there another key that is?

I see that vite 6 is out; I could upgrade if that would give me a way to working sass sourcemaps.

the css.devSourcemap option is still documented: https://vite.dev/config/shared-options.html#css-devsourcemap. (It's from the link there that I found this discussion).

Sass sourcemaps in dev are important to me, and it was great when they used to work, it was part of why I chose vite, I'd love to get them back!

[usizu]

@jrochkind @return42

I forget where I found this but I've had it working for a while now, here is the relevant part of my viteconfig. I'm using SASS not LESS anymore btw. Also have "@parcel/transformer-sass": "^2.12.0" as a dev dependency but i forget if that was needed.

import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {

  return {
    css: {
      devSourcemap: true,
    },
    build: { ... },
    preview: {...}
    }
  }
}
    

If I comment out the devSourcemap line then the source maps instantly disappear in browser devtools, viewing my local vite dev, so for sure this is it. I'm using vite 5.2.11.

I was playing around with it just now and I can comment out all the plugins etc, rollup etc, and the only thing that makes a difference is that one line devSourcemap inside the css block at the top level.

[jrochkind]

@usizu okay, thanks for giving version number you used! I tried with other vite versions to see if I could identify where it breaks -- I could.

For me, it works up to vite 5.3.4.

It is broken on 5.3.5, as well as 5.4.0, and 5.4.14.

My app does not work with vite 6.x yet, so I can't test that.

it seems unlikely they'd break this on purpose in a 5.4.13=>5.4.14. A bug? Is this option not frequently used, if it hasn't been noticed? I will try to reproduce in a simple hello world app, and then maybe try to report it elsewhere, if I can?

[usizu]

@usizu okay, thanks for giving version number you used! I tried with other vite versions to see if I could identify where it breaks -- I could.

For me, it works up to vite 5.3.4.

It is broken on 5.3.5, as well as 5.4.0, and 5.4.14.

That is very good to know, and I will be sure to be cautious if I ever update vite to 5.3. I should try to see if it also breaks for me actually, if I get time

[jrochkind]

I would be really curious to know if YOUR app works with 5.3.5, yeah!

Also curious what environment you are in -- I use rails and vite-ruby/vite-rails. I am having trouble figuring out how to create a simple vite hello world on it's own that can demonstrate source maps! The default create-vite apps inject the CSS into an inline <style> tag, so the browser doesn't give you any filename/line numbers at all, with or without source maps!

[usizu]

I would be really curious to know if YOUR app works with 5.3.5, yeah!

Ok so I just updated to vite 5.4.14, and I appear to still be getting my SASS source maps just fine.

I'm using a simple vanilla vite app, I installed vite as a dependency rather than use the create-vite command IIRC. It's just a simple JS frontend app. I am using TS and no backend or frontend framework at all, and almost no plugins either.

"devDependencies": {
    "@iconify/json": "^2.2.193",
    "@parcel/transformer-sass": "^2.12.0",
    "@rollup/plugin-url": "^8.0.2",
    "@types/node": "^20.0.0",
    "@vitejs/plugin-vue": "^5.0.5",
    "autoprefixer": "^10.4.19",
    "jquery": "^3.7.1",
    "parcel": "^2.12.0",
    "typescript": "^5.6.3",
    "vite": "^5.4"
  },

not sure if any of this is useful but just sharing for disclosure / incase, shrug

---

The default create-vite apps inject the CSS into an inline <style> tag, so the browser doesn't give you any filename/line numbers at all, with or without source maps!

Also I believe you need to link your stylesheet from index.html. My vite dev loads that linked stylesheet, and injects an inline /*# sourceMappingURL=data:application/json;base64, xxx... */ long sourceMap string into a <style> tag in <head>.

If I turn off sourcemaps, then browser devtools shows me the single linked compiled .scss file with its huge line numbers. So I guess there's something off with your setup?

[jrochkind]

thank you, very helpful!