css - 在 meteor 中使用 chrome DevTools 的实时 css/less/scss 版本

Question

我要筹this再问。

this 的答案中提出了什么建议问题是使用老式方法:

1. 将 css 存储在 public 中文件夹，并通过 <link href= 包含它
2. 添加public文件夹到 google chrome devtools workspace

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

1. 它仍然不是本地的，为了生产，我将不得不从 public 移动文件文件夹
2. 每次您编辑 css 时，meteor 都会注意到更改并重新加载应用程序。 that的作者回答忽略了它。

基本上我想要的结果是:

• 我开始 meteor 元素，打开 chrome 开发者工具
• 每次我在 chrome 开发者工具中编辑 css 时，它都会在元素中自动更改。

问题:

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

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

就工作效率而言，此功能对我来说非常重要。

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

Answer 1

我的做法很简单。

1. 打开您的网站

2. 右键单击 -> 检查元素

3. 点击设置 -(右上角的滚轮)。

3.1。选择 General 选项卡并查找 Sources 标签(位于底部)。在那里搜索 Enable CSS source maps 和 Auto-reload generated CSS。检查两者。如果需要，您可以检查所有功能。

1. 选择 Workspace 选项卡并添加元素文件夹。

2. 刷新 devtools/browser 并重复步骤 2 的所有内容。

3. 现在，打开源面板(元素 - 网络 - 源)。浏览您的文件夹并找到 css 文件。

4. 右键单击它并选择映射到文件系统资源。应该会出现一个包含少量 css 文件的窗口(取决于您的元素配置)。

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