在流星中使用chrome DevTools的實時css/less/scss版

Question

我想再次提出this的問題。

什麼建議在回答this問題是使用老式的方法：

1. 商店CSS在public文件夾，並通過<link href=
2. incude它添加public文件夾，谷歌chrome devtools workspace

根本不是火箭科學。作品，但兩件事情我不同意這種做法，如：

1. 它仍然不是本地和生產，我將不得不從public文件夾
2. 每次編輯CSS，流星通知的變化和重載移動文件應用。作者that答案忽略了它。

基本上這個結果，我想：

• 我開始流星項目，打開Chrome開發者工具
• 我每次編輯CSS Chrome開發工具它在項目自動改變。

問題：

• 流星執行所有的CSS文件even with --debug flag on的串聯。但提供源地圖。
• 流星仍然會在文件更改後重新加載，但幸運的是，風格流星執行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 /瀏覽器和重複的一切步驟2

3. 現在，打開Source panel（要素 - 網絡 - 源）。瀏覽你的文件夾並找到css文件。

4. 右鍵單擊它並選擇Map to file system resouce。一個窗口幾乎沒有css文件應該出現（取決於你的項目配置）。

7.1爲您的項目選擇css文件。將出現一個彈出窗口，要求您重新啓動devtools。點擊確定。請享用。

Answer 2

我還沒有用Meteor測試過，但是對於Harpjs &靜態HTML文件，Chrome LiveReload extension會將Chrome Dev中的更改注入到實際文件中。