vue cli inspecting css from browser development console

Question

Following various vue cli example to successfully implement scss file into the vue file, the page now loads with css imported but I cannot inspect from which file / line number the css declaration comes from, all it says in chrome console is within the not from the actual file like "margin.scss line 40".

here is my vue.config.js

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: ["@/src/css/index.scss"]
    }
  },

here is my App.vue

<template>
  <div >

  </div>
</template>


<style lang="scss" >
  @import "./css/index.scss";
</style>

and here is what I see,

Answer 1

Activate sourcemaps:

module.exports = {
  css: {
    sourceMap: true,
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: ["@/src/css/index.scss"]
    }
  },

https://cli.vuejs.org/config/#css-sourcemap