Css 在Chrome DevTools中实时更改Vue.js应用程序（Webpack模板）的页面样式时出现页面样式中断 复制步骤

我使用

webpack

模板从

vue cli

引导应用程序。我在Chrome

65.0.3325.146

上运行它，但它也存在于

64.X.XXX

版本上

我在这里补充：

package.json

：

webpack.base.conf.js

：

人们期望什么？ 该应用程序应该与Chrome浏览器配合使用，我应该能够在Chrome开发工具中禁用/更改样式

// file: config/index.js

...
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: false,
...

到底发生了什么？ 当我通过Chrome

dev tools

更改样式时（在更改或禁用一个属性后），该页面看起来像纯HTML中的所有样式，没有任何样式代码行。新的开发工具安装和Chrome重新安装没有帮助。有点棘手的是，在Firefox

58.0.2

上，一切正常

---

我的同事也有这个问题，所以它让我相信这不是我的本地bug，而是Vue方面更大的bug。还可以找到一些关于这个bug的问题，比如

提前谢谢

致以最良好的祝愿，

---

Marcin

我也遇到了这个问题，通过在开发中禁用CSS源代码映射，我能够防止这个问题。我还在研究为什么这只发生在Chrome上，但至少我们可以开始研究。我不相信这是一个网页问题

--更新--

我只是在config/index.js文件中将devtool改为“eval source map”，一切正常

file: config/index.js

...
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map'
...

---

我找到了另一个解决方案。感谢@munstrocity关于将

廉价模块评估源地图

更改为

评估源地图

的回复。不幸的是，这一更改并没有为我修复Chrome开发工具中的样式，但给了我很好的检查点

我发现，在

config/index.js

中将

cachebursting:true、

更改为

false

有助于解决这个问题，现在可以在Chrome开发工具中更改样式

// file: config/index.js

...
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: false,
...

---

希望这对任何人都有帮助！：）

我有这个问题，但只有当我在一个组件中有多个块的时候

例如：

---

我不知道为什么会这样。希望它对其他人有所帮助。

在您的网页配置文件中，您可以尝试为您的sass加载程序配置启用源映射

您需要按如下方式编辑文件：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                sourceMap: true
            }
        }
    }
}

---

这是不是应该作为一个bug提交给Chromium？@SeanLarkin可能是的，但现在我只在

webpack

模板上通过

Vue cli

检测到了这个问题。因此，它也可能位于该模板/Vue端。我问的原因是，可能有人也在解决这个问题。最新的Vue Cli版本是否也有同样的问题？@Jesúsfuents我没有检查它，您能提供您的确切版本吗？我可以在业余时间试试：）最后一个，v3.8.2。谢谢。我们也遇到了这个问题-无法在Chrome调试器中编辑样式而页面不会丢失所有样式。但是，在我们的Vue CLI应用程序中，我们没有配置文件夹，更不用说index.js文件了。是否应该增加？在高层？在src文件夹中？谢谢，詹姆斯，它是这样的！：）我可以问一下这些样式表是否是在您的案例中的任何预处理器中编写的吗？是的，我在样式表中使用了SCS，但只是没有在我的代码示例中包含它-为了使我的答案更一般这为我解决了这个问题。谢谢对我来说，这修复了它，但当设置为

sourceMap:false

时！

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                sourceMap: true
            }
        }
    }
}