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

我想再次提出this的問題。在流星中使用chrome DevTools的實時css/less/scss版

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

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

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

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

基本上這個結果，我想：

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

問題：

流星執行所有的CSS文件even with --debug flag on的串聯。但提供源地圖。
流星仍然會在文件更改後重新加載，但幸運的是，風格流星執行soft injection，我會調用它，所以頁面不會真正重新加載。這沒關係，並不是一個真正的問題。

由於第一個問題and this bug我不能得到它的工作。

此功能對於我來說在生產力方面非常重要。

我會爲某位大師提供一個很好的獎勵，他可以給我一個方向來解決這個問題。也許你指點我一些出發點爲Chrome製作一個插件，這也是可以接受的

來源

2015-08-16 ZuzEL

我可能必須讀兩次，因爲它不是很清楚，但作爲第一個快速提示，您是否考慮過使用類似Devtools中的工作空間[https://developer.chrome.com/devtools/docs/workspaces] （https://developer.chrome.com/devtools/docs/workspaces） –

@RaduChiriac對不起，編輯，使我的問題清楚，將不勝感激。是的，有人在回答老問題時提出了建議。工作區是我們必須使用的。但它不適用於流星串聯的CSS。 – ZuzEL

您是否嘗試過使用來自npm的瀏覽器同步？ –

我這樣做的方式很簡單。

打開你的網站
右鍵 - >檢查元素
點擊設置 - （在右上角的滾輪）。

3.1。選擇General選項卡並查找Sources標籤（底部附近）。在那裏搜索Enable CSS source maps和Auto-reload generated CSS。同時檢查。如果需要，您可以檢查所有功能。

選擇Workspace選項卡並添加項目文件夾。
刷新devtools /瀏覽器和重複的一切步驟2
現在，打開Source panel（要素 - 網絡 - 源）。瀏覽你的文件夾並找到css文件。
右鍵單擊它並選擇Map to file system resouce。一個窗口幾乎沒有css文件應該出現（取決於你的項目配置）。

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

來源

2015-08-23 15:24:52 Stanimir

你確定你用'meteor'做了這個嗎？ – ZuzEL

無論流星還是不流星都沒關係。所有你需要做的就是指向你的css/scss/less文件的路徑。瀏覽器將完成其餘的工作 – Stanimir

我將問題與相似的問題聯繫起來，答案與您的問題完全相同，但更多地針對流星指定。 http://stackoverflow.com/a/22755210/2555999我不知道什麼谷歌文檔說，唯一的原因是，它不適用於流星。看到我的問題。我說流星將所有的css連接在一起，chrome開發工具無法處理它。 – ZuzEL

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

來源

2015-12-07 00:47:05 afang

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

回答

相關問題