在流星中使用 chrome DevTools 的实时 css/less/scss 版本

Posted 2023-03-08

【中文标题】在流星中使用 chrome DevTools 的实时 css/less/scss 版本

【英文标题】：Realtime css/less/scss edition using chrome DevTools in meteor

【发布时间】：2015-11-08 22:35:05

【问题描述】：

我想再次提出this 的问题。

this 问题的答案中建议使用老式方法：

将 css 存储在 public 文件夹中，并通过 <link href= 包含它 将public文件夹添加到谷歌浏览器开发工具workspace

根本不是火箭科学。有效，但有两点我不喜欢这种方法：

它仍然不是原生的，为了生产，我必须从 public 文件夹中移动文件 每次编辑 css 时，meteor 都会通知更改并重新加载应用程序。 that答案的作者忽略了它。

基本上我想要这个结果：

我启动meteor项目，打开chrome开发者工具 每次我在 chrome 开发人员工具中编辑 css 时，它都会在项目中自动更改。

问题：

Meteor 执行所有 css 文件 even with --debug flag on 的串联。但提供源地图。 文件更改后 Meteor 仍会重新加载，但幸运的是，对于流星执行的样式 soft injection，我会调用它，因此不会真正重新加载页面。没关系，不是真正的问题。

由于第一个问题and this bug 我无法让它工作。

这个功能对我的工作效率来说非常重要。

我会为一些大师提供一个很好的赏金，他可以给我一个解决这个问题的方向。也许你给我指出了一些为chrome制作插件的起点，这也是可以接受的

【问题讨论】：

我可能必须阅读所有内容，因为它不是很清楚，但作为第一个快速提示，您是否考虑过使用 Devtools 中的 Workspaces https://developer.chrome.com/devtools/docs/workspaces

@RaduChiriac 抱歉，我们将不胜感激进行编辑以明确我的问题。是的，在旧问题的答案中提出了建议。工作区是我们必须使用的。但它不适用于连接 css 的流星。

你试过使用 npm 的浏览器同步吗？

有可能解决问题 #2 github.com/NucleusIDE/meteor-live-update

@JoshBeam browser-sync 很好，但它并没有执行相反的操作-如我所见，将 css 从 chrome 检查器更新到硬盘驱动器。

【参考方案1】：

我还没有用 Meteor 测试过，但是对于 Harpjs 和静态 html 文件，Chrome LiveReload extension 会在 Chrome Dev 中将更改注入到实际文件中。

【参考方案2】：

我的做法很简单。

打开您的网站

右键 -> 检查元素

点击设置-（右上角的滚轮）。

3.1。选择General 选项卡并查找Sources 标签（在底部附近）。在那里搜索Enable CSS source maps 和Auto-reload generated CSS。检查两者。您可以根据需要检查所有功能。

选择Workspace选项卡并添加项目文件夹。

刷新开发工具/浏览器并重复步骤 2。

现在，打开Source panel（元素 - 网络 - 源）。浏览您的文件夹并找到 css 文件。

右键单击它并选择Map to file system resouce。应该会出现一个包含少量 css 文件的窗口（取决于您的项目配置）。

7.1 为您的项目选择 css 文件。将出现一个要求您重新启动 devtools 的弹出窗口。单击确定。享受吧。

【讨论】：

你确定你用meteor做这个吗？

不管是不是流星。您需要做的就是将路径指向您的 css/scss/less 文件。浏览器将完成剩下的工作

我将我的问题与类似的问题联系起来，答案与您的完全相同，但更针对流星。 ***.com/a/22755210/2555999我不知道谷歌文档说什么，唯一的原因是它不适用于流星。看我的问题。我说meteor把所有的css串联在一起，chrome dev工具处理不了。

当然这不起作用，因为 Meteor 在构建过程中将（编译或未编译的）源放入 .meteor 文件夹中，浏览器加载的文件只是实际项目的副本与您合作的来源。更改将会丢失。