Failing to generate sourcemaps for css from scss, while js sourcemaps are OK

[ronmurp]

Can't get vite to create css sourcemaps.

I have this project structure for a .NET 10 web app:

Abs.WebApp
  |- wwwroot
  |      |- admin
  |      |      |- css
  |      |      |- js
  |      | - bookings
  |      |      |- css
  |      |      |- js

Abs.WebApp.Client
  |- src // Mirrors output folders
  |- vite.config.ts

Vite is supposed to take the Abs.WebApp.Client/src and put the css and js and soucemaps in the Abs,WebApp/wwwroot folders.

It's producing sourcemaps for js, but not for css.

vite 7.2.4

vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "node:path";

export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      "@common": path.resolve(__dirname, "src/common"),
      "@admin": path.resolve(__dirname, "src/admin"),
      "@bookings": path.resolve(__dirname, "src/bookings"),
      "@private": path.resolve(__dirname, "src/private"),
      "@events": path.resolve(__dirname, "src/events"),
    },
  },

  css: {
    devSourcemap: true, // Enable source maps in development
    preprocessorOptions: {
      scss: {
        // Red squigglies when these are included and still no css source maps,
        // though Ai suggests they should be included.
        // sourceMap: true, // Enable source maps for SCSS
        //omitSourceMapUrl: false, // Keep the source map URL in the output
      },
    },
  },

  build: {
    sourcemap: true, // Enable source maps for the build
    cssCodeSplit: true,
    outDir: path.resolve(__dirname, "../Abs.WebApp/wwwroot"),
    emptyOutDir: true,

    rollupOptions: {
      input: {
        admin: path.resolve(__dirname, "src/admin/ts/admin.main.ts"),
        bookings: path.resolve(__dirname, "src/bookings/ts/bookings.main.ts"),
        private: path.resolve(__dirname, "src/private/ts/private.main.ts"),
        events: path.resolve(__dirname, "src/events/ts/events.main.ts"),
      },
      output: {
        sourcemap: true, // Ensure source maps are generated
        manualChunks: {
          vendor: ["vue", "bootstrap"],
        },
        entryFileNames: (chunkInfo) => {
          const name = chunkInfo.name;
          if (name === "admin") return "admin/js/admin.js";
          if (name === "bookings") return "bookings/js/bookings.js";
          if (name === "private") return "private/js/private.js";
          if (name === "events") return "events/js/events.js";
          return "common/js/[name]-[hash].js";
        },
        chunkFileNames: "common/js/[name]-[hash].js",
        assetFileNames: (assetInfo) => {
          const fileName = assetInfo.name ?? "";
          if (fileName.endsWith("admin.css")) return "admin/css/admin.css";
          if (fileName.endsWith("bookings.css")) return "bookings/css/bookings.css";
          if (fileName.endsWith("events.css")) return "events/css/events.css";
          if (fileName.endsWith("private.css")) return "private/css/private.css";
          if (fileName.endsWith(".css")) return "common/css/[name][extname]";
          return "assets/[name]-[hash][extname]";
        },
      },
    },

    // Force source maps by disabling optimizations
    minify: false, // Disable minification to ensure source maps are not stripped
    assetsInlineLimit: 0, // Prevent inlining of assets
  },

  server: {
    strictPort: true,
    port: 5173,
    fs: { allow: [".."] },
  },

  publicDir: path.resolve(__dirname, "public"),
});

Significant part of package.json

{
"devDependencies": {
    "@types/node": "^24.10.1",
    "@vitejs/plugin-vue": "^6.0.2",
    "autoprefixer": "^10.4.22",
    "axios": "^1.13.2",
    "postcss": "^8.5.6",
    "sass": "^1.94.2",
    "typescript": "^5.9.3",
    "vite": "^7.2.7",
    "vite-plugin-handlebars": "^2.0.0"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "ag-grid-community": "^34.3.1",
    "bootstrap": "^5.3.8",
    "bootstrap-icons": "^1.13.1",
    "vue": "^3.5.24"
  }
}

[tt-a1i]

The issue is likely with your assetFileNames configuration. When you rename CSS files (e.g., admin.css), the corresponding .map files might not be generated with matching names or paths.

A few things to check:

1. Verify sourcemap files exist

find ../Abs.WebApp/wwwroot -name "*.css.map"

2. Check CSS file for sourceMappingURL
Open one of the generated CSS files and look for:

/*# sourceMappingURL=admin.css.map */

3. Try explicit CSS sourcemap config

build: {
  sourcemap: true,
  rollupOptions: {
    output: {
      sourcemap: true,
      // For CSS assets, include .map extension handling
      assetFileNames: (assetInfo) => {
        const fileName = assetInfo.name ?? "";
        // Handle both CSS and their sourcemaps
        if (fileName.endsWith("admin.css") || fileName.endsWith("admin.css.map")) 
          return "admin/css/admin[extname]";
        // ... rest of your logic
      },
    },
  },
}

4. Known Vite 7 issue?
Vite 7 is very new. You might try Vite 6.x to see if it's a regression:

npm install vite@6

Also, css.devSourcemap only affects dev server - for production builds, build.sourcemap: true is what matters.