Javascript Vue CLI源映射到Vue组件文件的样式部分

我正在玩Vue CLI项目。我已经配置了startup project，设置了一些开发更改，如下所示：

package.json

"dependencies": {
    "bootstrap": "^4.3.1",
    "core-js": "^3.0.1",
    "preload-it": "^1.2.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuetify": "^1.5.14",
    "vuex": "^3.1.1"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-pwa": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "fontello-cli": "^0.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.2.2"
}

vue.config.js

module.exports = {
    configureWebpack: {
        devtool: process.env.NODE_ENV === 'development'
            ? 'inline-source-map'
            : false,
    },
    css: {
        sourceMap: process.env.NODE_ENV === 'development'
    }
}

module.exports = {
    presets: [
        [
            '@vue/app',
            { useBuiltIns: 'entry' }
        ]
    ]
}

babel.config.js

module.exports = {
    configureWebpack: {
        devtool: process.env.NODE_ENV === 'development'
            ? 'inline-source-map'
            : false,
    },
    css: {
        sourceMap: process.env.NODE_ENV === 'development'
    }
}

module.exports = {
    presets: [
        [
            '@vue/app',
            { useBuiltIns: 'entry' }
        ]
    ]
}

但是到vue文件的sourcemaps仍然生成错误（到scss文件正常）

单击href至vue组件后

注:

• 中相同文件的许多版本webpack://./
• 标记中唯一的部分在源代码编辑器中可见（可能这是原因之一）
• 未使用装载的文件系统工作区中的文件

这就是原始文件的样子——可以通过Chrome开发工具对其进行编辑

是否有可能修复元素检查器选项卡（样式）将提供正确的源目标

编辑1
最简单的设置：
安装Vue CLI（3.7）
添加my vue.config.js（以启用源地图）
运行

npm运行服务

编辑2
与Vue CLI 3.5相同

我还使用测试项目创建了repo，但就像我写的一样，它只是带有配置的启动项目。

编辑3 Vue cli github问题

---

到目前为止，我还没有找到解决方案-至少使用Vue CLI。
但我找到了解决办法

但首先，整个问题不是关于Vue CLI，而是Vue loader插件IMO的问题。我这么认为是因为在使用Vue和webpack的干净设置时，我也看到了这个问题

我发现这与为Vue文件的这些部分生成的错误sourcemap有关，并且 这些零件的来源仅限于这些标记的内容。这可能就是浏览器无法将其映射到源的原因。此外，sourcemap中源文件的路径错误

我已经为修复这些源地图的webpack准备了额外的加载程序。
检查以下回购中的sm修复加载程序。
我不知道它是否解决了所有问题，但至少在我的情况下，它工作得很棒

什么工作正常：
构建

节点_ENV=开发网页

SCS内联（在vue文件中）和单独的文件中 TS/JS内联（在vue文件中）和单独的文件中

HRM

NODE\u ENV=开发网页包开发服务器--hotOnly

SCS内联（在vue文件中）和单独的文件中 它还可以在不重新加载页面本身的情况下重新加载样式：D
TS/JS内联（在vue文件中）和单独的文件中

回购与工作示例：

---

逐步解决方案：

在

vue.config.js

中启用css源映射：

将所有SCS从组件移动到单独的文件中，在

index.scss

中整理它们，并通过App.vue导入

index.scss

。这将解决vue css源映射的许多问题（由Webpack、Devtools和vue cli引起），并在一定程度上简化您的工作流程。如果需要确定范围，请通过#选择器（）手动确定范围

进一步说，您可能只需要为

node_模块

设置CSS提取，因为一旦您触摸到devtools中的任何CSS，另一个就会破坏样式：

devtool:“廉价源代码映射”，
插件：process.env.NODE_env==='development'？
（[new MiniCssExtractPlugin（）]）：[]，
模块：{
规则：[
process.env.NODE_env===“开发”？
(
{
//测试：/node_模块/，
测试：/node\u modules\/.+\.scss/，
使用：[
MiniCssExtractPlugin.loader，
{
加载器：“css加载器”，
选项：{
进口装载机：2，
sourceMap:true
}
},
{
加载器：“postss加载器”，
选项：{
插件：（）=>[require（'autoprefixer'）]，
sourceMap:true
}
},
{
加载器：“sass加载器”，
选项：{sourceMap:true}
}
]
}) : {}
],
}

如果您提取所有css，您将丢失hmr（热模块重新加载=编辑时重新加载），但由于您没有在

节点_模块

中真正编辑SCS，因此只能提取它们

---

总而言之，这修复了Devtools中所有与vue css相关的sourcemap问题，并在浏览器中启用了热编辑功能。

尝试使用vue调试器chrome插件。例如，它在调试Vuex方面也非常有效。@devilsmagrade，正如您在屏幕上看到的，我已经在使用vue插件了，但还不够。我将我的vue.config更改为与您的相同，但问题并不存在。样式中的My href不是MyComponent？[sm].vue它只是

MyComponent.vue

它让我找到了完整的源代码。也许是版本？我有Vue 2.6.6和Vue clI服务3.5.0。href也将我带到树的localhost部分（不是webpack://）。我还没有研究保存更改的问题，但似乎源代码显示不完整的问题是特定于scss/sass加载程序的。我尝试了一系列替代配置和不同的开发工具（由Linus Borg建议），但我还没有尝试修复它。