如何将CSS成功导入Polymer

Question

这是一个101问题,但我试图将我的CSS样式从我的HTLM聚合物代码外部化到一个单独的CSS文件中.

从我可以看出,.css如果你在模板元素中导入它,可以通过文件完成.

例如

 <template> 
   <link rel="stylesheet" href="mystyles.css">
   ....
 </template>

但是,我从Polymer导入和使用的元素样式似乎先例.所以我可以举例说

1. 在mystyles.css中创建样式

   .my-background { 
      background: #4fc3f7;
   }
   

2. 然后应用它

   paper-fab class="my-background"..>...
   

但纸张工厂的背景并未受到影响,被纸张工厂的风格所覆盖.

道歉,因为各种文章都在解释聚合物中样式的使用.但是没有一个是明确和简单的,可以说"如果你以前像过去一样导入样式......那么现在就这样做......"

Answer 1

样式表应该在dom-module中导入,但在模板外部.另外,您应该指定rel="import和type="css".您可以在文档中找到更多信息.

<dom-module id="test-element">
    <link rel="import" type="css" href="mystyles.css">
    <template>
        <paper-fab class="my-background">Test</paper-fab>
    </template>
</dom-module>

更新 外部样式表已被弃用.从文档:

现在不推荐使用此实验性功能,而是使用样式模块.它仍然受支持,但将来会删除支持.