vue cli inspecting css from browser development console

2
votes

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,

it would be helpful if it showed actual filename and line number

1
vue.jsvue-cli-3

1 Answers

2
votes

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