vue cli 从浏览器开发控制台检查 css答案

【问题标题】：vue cli inspecting css from browser development consolevue cli 从浏览器开发控制台检查 css
【发布时间】：2019-07-12 11:03:37
【问题描述】：

按照各种 vue cli 示例成功将 scss 文件实现到 vue 文件中，页面现在加载了导入的 css，但我无法检查 css 声明来自哪个文件/行号，它在 chrome 控制台中所说的都在不是来自“margin.scss line 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>

这是我看到的，

【问题讨论】：

标签： vue.js vue-cli-3

【解决方案1】：

激活源地图：

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

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

【讨论】：