在流星中使用chrome DevTools的实时css/less/scss版本
Zuz*_*zEL 9 css less google-chrome-devtools webstorm meteor
我想再次提出这个问题.
在这个问题的答案中建议的是使用老式的方法:
- 将css存储在
public文件夹中,并将其包含在内<link href= - 将
public文件夹添加到Google Chrome devtoolsworkspace
根本不是火箭科学.工作,但我不喜欢这种方法的两件事:
- 它仍然不是原生的,对于生产我将不得不从
public文件夹中移动文件 - 每次编辑css时,流星通知都会更改并重新加载应用程序.该答案的作者忽略了它.
基本上这个结果我想:
- 我启动流星项目,打开chrome开发工具
- 每次我在chrome开发人员工具中编辑css时,它都会自动更改项目.
问题:
- 即使
--debug标志打开, Meteor 也会执行所有css文件的连接.但是提供了源地图. - Meteor在文件更改后仍会重新加载,但幸运的是,对于样式流星表演
soft injection,我会称之为,因此页面不会真正重新加载.没关系,也不是真正的问题.
由于第一个问题和这个错误我无法让它工作.
就生产力而言,此功能对我来说非常重要.
我会为一些古茹提供一个很好的赏金,他可以给我一个方向来解决这个问题.也许你指出一些起点为chrome制作一个插件,这也是可以接受的
我的做法非常简单。
打开您的网站
右键单击 -> 检查元素
单击“设置”-（右上角的滚轮）。
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。单击“确定”。享受。