與Aurelia CLI的CSS管理：每個視圖加載另一個CSS文件被強制執行全站點導致衝突

我有一個項目有6個視圖（html）。每個視圖都有一個對應的視圖模型（.js）和一個僅用於該視圖的樣式表（.js）與Aurelia CLI的CSS管理：每個視圖加載另一個CSS文件被強制執行全站點導致衝突

aurelia-cli通過我的文件免費遞歸併捆綁所有.js和.css文件轉換爲幾個文件，以便在減少頁面加載時間和大小的同時引用它們。因此，如果我有一個帶有welcome.html，welcome.js和welcome.css的歡迎文件夾，則可以將welcome.html的CSS加載到以下<require from="./welcome.css"></require>，並在加載頁面時將CSS注入到<head></head>標記中。

的問題是，當我導航到下一個視圖時，來自welcome.html/welcome.css的CSS規則仍然在網頁的<head>標記中，因此仍在執行。在訪問我的應用程序中的所有6個視圖後，我現在在<head>標記中擁有6個<style>標記，並且所有六個頁面中的所有規則都在我訪問的每個頁面上執行，在頁面刷新之前不會發生卸載。毋庸置疑，訪問了幾頁後，整個網站變得混亂垃圾。

所以我的問題是

爲什麼這是一個功能
我在這裏失蹤的最佳做法？
現在有什麼方法可以在訪問時加載頁面的CSS，在導航時卸載它，並將新頁面加載到它的位置？

如果我有一個全球性的樣式表，引導，動畫CSS和字體真棒，在這一天我有14種衝突的方式永久地注入HTML應用程序的其餘部分的結束10頁的應用程序注入成。

有什麼建議嗎？謝謝你的閱讀。

來源

2016-09-06 Scott Clark

在面對類似的情況後，進行長時間的實驗，我得出了一個簡單的結論：我不喜歡這種「注入CSS文件無處不在」的方法。請讓我有點咆哮。 :)

它有什麼好處？

我們已經創建了一個常用的組合式全局樣式表（bootstrap，font-awesome等）。據推測，它在index.html的頭部。當然，因爲我們希望在應用加載之前擁有一個不錯的啓動畫面。 Even in the official skeleton-navigation app
避免<require>的另一個原因是它的異步特性，它使我們對CSS load order的控制很少（或不控制）。它非常適合JS模塊/自定義元素，但不適用於多個CSS文件。
最後，還有其他<require>標籤放置在每個視圖中，只是爲了讓我們已經'簡單'的情況更加'直接'。

因此，將其餘的應用樣式表打包到這個已經存在的全局樣式表中，顯示順序會不會更容易？

我的建議

Aurelia路上，CLI有一個很大的特點，被稱爲generators。只要您願意，您可以擴展其功能。考慮到這一點，您可以爲自定義CSS預/後處理創建新任務，並將它們插入到構建過程中。

您可以完全控制過程。
1個縮小文件將被創建。它將包含預期的CSS加載順序中的所有內容。
一個小應用程序的CSS文件大小就像〜10-30KB，對吧？它不會受傷。 :)

我幾天前創建了一個小項目，它也解決了這個問題：aurelia-custom-skeleton。工作演示here。

在生成過程中，它會創建全球DEPS一個base.css，以及自定義CSS文件的app.css。這是爲了調試目的。
這兩個文件合併爲styles.min.css，該文件在index.html中部署和引用。
如果您需要創建一個真正可自行執行的應用程序，而無需外部文件，您仍然可以嵌入此1組合樣式表。

來源

2016-09-06 22:57:05

我想這只是混淆了我爲什麼aurelia沒有卸載CSS的方式，它帶來了我沒有找到合理的邏輯，使多個頁面上的一個頁面使用CSS。這提供了什麼好處？我會看看你的解決方案，但我不知道這是否是工作在github上成爲問題。如果它沒有提供任何好處，它應該是固定的。 –

難道你不能只使用sass的@import功能按照你想要的順序導入scss文件嗎？然後，只需要應用程序本身的頂級scss文件。 – pQuestions123

這真的會引發另一個無法訪問在特定變量文件中設置的變量（即顏色等）的問題。我去解決方案只是將所有scss導入一個主scss文件（它導入頂部的colors.scss）。然後你可以訪問所有文件中的所有顏色。你所需要做的就是將一個主文件轉儲出來。 – pQuestions123

與Aurelia CLI的CSS管理：每個視圖加載另一個CSS文件被強制執行全站點導致衝突

回答

相關問題