How do I enable stylesheet source maps in dev mode for VueJS+Vite (>3.0)?

Question

I've setup a new VueJS project using the default scaffolding method npm create vue@latest (which right now is Vue 3.5.22), that uses Vite under the hood.

I want to use Sass for my stylesheets, and I'm writing Single File Components. I added sass-embedded for Vite to transpile the Sass code. Here's a sample of a Vue component I wrote:

<script setup>
import {ref} from 'vue';

</script>

<template>
  <div class="my-container"></div>
</template>


<style lang="scss" scoped>
.my-container {
  width: 500px;
  height: 500px;
  background-color: red
}
</style>

But in the web developper tools (chrome here), when inspecting the style for that div element, the indicated source is the inline <style> element that was inject by Vite, not the source to my SFC .vue file.

How do I enable sourcemaps for the stylesheets?

Here's my package.json :

{
  "name": "sample-app",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "3.5.22"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "6.0.1",
    "sass-embedded": "1.93.3",
    "vite": "7.1.11",
    "vite-plugin-vue-devtools": "8.0.3"
  }
}

Quentin · Accepted Answer · 2025-11-18 15:05:49Z

0

Edit Vite config file that was generated by the Vue scaffolding tool (vite.config.js at the root of the project), and add the following option:

  css: {
    devSourcemap: true
  }

At the time of this post, the config file (as generated by Vue, with the above option added) should look like this:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  css: {
    devSourcemap: true
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

answered Nov 18 at 15:05

Quentin

1,1732 gold badges12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I enable stylesheet source maps in dev mode for VueJS+Vite (>3.0)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related