聚合物CSS變量不被替換

我已經繼承了前端使用Polymer構建的Web應用程序。當我運行各種Docker命令時，主要是的作品，但有一些CSS問題。具體來說，一些聚合物風格似乎並未被編譯。例如，與<paper-dialog>元件，顏色變量沒有被替換：聚合物CSS變量不被替換

.paper-dialog-0 { 
    display: block; 
    margin: 24px 40px; 

    background: --primary-background-color; 
    color: --primary-text-color;;;; 
} 

// ... 

.paper-dialog-0 .buttons { 
    position: relative; 
    padding: 8px 8px 8px 24px; 
    margin: 0; 
    color: --primary-color;;; 
}

在另一示例中，圖標一堆都放置一個在另一個頂上並沒有被正確地定位。

我已經運行了項目隨附的各種Gulp命令，其中包括硫化所有東西。大多數情況下，這些風格似乎是「聚合」的。我之前從未使用過Polymer，所以我對如何將組件構建到HTML和CSS中有點遺憾。有沒有明顯的步驟，我錯過了沒有記錄在項目中？

來源

2017-05-08 whiterook6

這聽起來像你期望構建輸出包含文字值而不是CSS變量，但CSS variables do not require this string replacement。瀏覽器自動使用由CSS變量指定的值（在polyfill的幫助下）。

關於如何構建組件，可能差別很大，但大多數Polymer項目使用polymer-cli來構建（用於縮小，捆綁等）。您也可以擁有自己的Gulp腳本，該腳本使用部分polymer-cli來最大程度地定製構建（請參閱custom-build template）。

來源

2017-05-08 23:47:42 tony19

CSS custom properties（又名變量）是一種非聚合物特有的網絡技術，大多數瀏覽器都支持它，所以很可能它們並不意味着要在您的項目中進行編譯或替換。

至於你的代碼中，有一個問題：要使用自定義屬性，您必須使用var() CSS功能：

.paper-dialog-0 { 
    display: block; 
    margin: 24px 40px; 

    background: var(--primary-background-color); 
    color: var(--primary-text-color); 
}

來源

2017-05-08 23:48:23

我認爲這是直接從紙上聚合物元件來了 - 我們沒有觸及該元素中的任何代碼。它的樣式應該正常編譯到什麼程度？編譯的聚合物樣式表是否包含css變量？我不願意改變輸出的CSS，因爲（我認爲）它會被下一次硫化覆蓋。 – whiterook6

我不知道你的構建過程是什麼樣子，但就像我說CSS定製屬性是由大多數瀏覽器支持的，所以我不希望它們被編譯或替換。瀏覽器可以理解它們，或者對於舊版本的瀏覽器，它們可以通過ShadyCSS等polyfill處理。 –

聚合物CSS變量不被替換

回答

相關問題