Vue CLI从浏览器开发控制台检查CSS

Question

按照各种vue cli示例成功将scss文件实现为vue文件后，该页面现在加载了导入的css，但我无法检查css声明来自哪个文件/行号，它在chrome控制台中说的全部在不是来自“ margin.scss第40行”之类的实际文件。

这是我的vue.config.js

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

这是我的App.vue

<template>
  <div >

  </div>
</template>


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

这就是我所看到的

Answer 1

激活源地图：

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

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