如何将 Chrome DevTools“样式”窗格中的更改同步到 webpack 网站的原始源代码？

问：

问题

我正在开发一个使用 webpack 的网站。我在 Google DevTools 上将源文件夹添加为工作区，并且所有文件都已正确映射。我可以在 DevTools 上的“源”面板上进行更改，并且原始文件在保存时会自动更新，正如预期的那样。但是，在“元素”面板下的“样式”窗格中所做的更改将被忽略，并且不会更新原始文件。所有更改在页面刷新时都会丢失。

我试过了什么

以下所有内容都在 DevTools 设置中启用。我尝试打开/关闭它们，重新启动DevTools，但无济于事。

• 启用 CSS 源映射>✅首选项
• 在“样式”窗格中同步 CSS 更改>✅实验

我还在一个单独的非捆绑的纯 html/js/css 网站上测试了该行为，样式窗格中的更改按预期更新了原始文件。

有关版本的一些信息：

• Chrome v119.0.6045.123
• vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/Prototypes/" : "/",
    css: {
        sourceMap: true,
        extract: process.env.NODE_ENV === 'development' ? false : true,
    },
    configureWebpack: {
        devtool: 'source-map',
    },
};

这个问题有什么解决方案吗？我是一名设计师/编码员，我发现“样式”面板在我的项目中以所见即所得的方式进行 css 更改非常重要。一些想法：

• 这是Chrome DevTools的错误吗？
• 我可以通过不捆绑、最小化或源映射 CSS 文件来解决这个问题吗？