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

Question

我想再次提出this个问题。

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

1. 将css存储在public文件夹中，并通过<link href=
进行收录
2. 将public文件夹添加到Google Chrome devtools workspace

根本不是火箭科学。工作，但我不喜欢这种方法的两件事：

1. 它仍然不是原生的并且用于制作我将不得不从public文件夹中移动文件
2. 每次编辑css时，流星通知都会更改并重新加载应用程序。 that回答的作者忽略了它。

基本上我想要这个结果：

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



问题：

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

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

此功能对我来说非常重要。

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

Answer 1

我这样做非常简单。

1. 打开您的网站

2. 右键单击 - ＆gt;检查元素

3. 点击“设置” - （右上角的滚轮）。

3.1。选择General标签，然后查找Sources标签（底部）。搜索Enable CSS source maps和Auto-reload generated CSS。检查两个。如果需要，您可以检查所有功能。

1. 选择Workspace标签并添加项目文件夹。

2. 刷新devtools / browser并将所有内容重复到第2步。

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

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

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

Answer 2

我还没有用Meteor测试过这个，但对于Harpjs＆amp;静态HTML文件Chrome LiveReload extension会将Chrome Dev中的更改注入实际文件。