2016-03-08 85 views
0

我正在着手用Material Designs Lite(MDL)css/js庫替換Polymer Elements附加組件,以便我可以使用更多本地組件爲Vaadin設計我的佈局。將css導入樣式/主題

我發現訪問聚合物元素的內部節點是一個巨大的挑戰,例如,Paper-Card具有用於卡片內容,卡片動作等的內部div。可能難以設置內容或動作一個帶本地Vaadin組件的卡片,因爲它們使用getRoot()和appendChild()更加緊密地構建到html樹形結構中,所以我不能只使用addComponent(new Card()),更不用說設計和佈局會變得很難座標。所以我寧願有一個一致的標準來設計樣式和使用組件,而不必擔心如果我使用Polymer vs Vaadin組件。

所以我的想法是如果我用MDL替換,那麼我應該能夠將材質樣式應用於Vaadin UI對象,而不需要創建元素和導入Polymer html組件。

但是,我有一個問題導入所需的CSS似乎。我已將JavaScript庫添加到我的UI類中,並確認它包含在Chrome中使用開發工具。但造型不適用。將css導入styles.scss有問題嗎?

styles.scss

@import "https://code.getmdl.io/1.1.2/material.indigo-pink.min.css" 
@import "../valo.css" 
.... 

或者是有完成使用材料設計Vaadin是簡單和容易的工作與那麼上面的我的最終目標的另一個方法是什麼?

回答

0

想通了。 material.css需要重命名爲使用scss文件類型。 (material.css - > material.scss)然後正確導入。