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

Question

问题

我正在开发一个使用 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 文件来解决这个问题吗？

Answer 1

嗨，我刚刚发布了一个旨在解决此问题的新包。 希望大家喜欢，喜欢的话请给个star吧

https://github.com/arpadroid/themes https://www.npmjs.com/package/arpadroid-themes