Enable sourcemaps in Vue-Vite

Thanks to @tony19 I could find it out:

Since vue ~2.0 it works like this:

In <projectRoot>/vite.config.js:

/**
* @type {import('vite').UserConfig}
*/
export default {
    plugins: [vue()],
    build: {
        sourcemap: true,
    },
}

Vite 2.x (docs):

// vite.config.js
export default {
  build: {
    sourcemap: true,
  },
}

Vite 1.x:

// vite.config.js
export default {
  sourcemap: true,
}

I'm using Vite 2.9 and a CSS sourcemap was not being loaded by the browser. (I'm also using Typescript, in case that is relevant to you.)

Based on the @types for vite.config.ts, there is a devSourcemap property under css which you can set to true.

Here is the vite.config.ts file I'm currently using:

import ...;
...

export default defineConfig({
  plugins: [
    vue(),
    checker({
      typescript: true,
      vueTsc: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  css: {
    devSourcemap: true,
  },
});

As mentioned in other answers, the build.sourcemap setting must be enabled to generate sourcemaps:

export default {
  build: {
    sourcemap: true,
  },
}

If you are looking for simple integration with Bugsnag, check out the following library:

https://github.com/ElMassimo/vite-plugin-bugsnag

It provides a plugin to upload sourcemaps, and will enable the build.sourcemap setting for you.

I use sass in my project and I add this to my vite.config.js, and got css sourcemap.

        import { defineConfig } from 'vite'
        
        // https://vitejs.dev/config/
        export default defineConfig({
          css: {
            devSourcemap: true,
          },
        })