javascript - 如何将 CSS 成功导入 Polymer

Question

这是一个 101 个问题，但我试图将我的 css 样式从我的 HTLM polymer 代码外部化到一个单独的 CSS 文件中。

据我所知，这可以通过 .css 来完成。文件，如果您在模板元素中导入它。

例如

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

但是，我从 Polymer 导入和使用的元素样式似乎是先例。所以例如我可能

在 mystyles.css 中创建样式

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

然后应用它

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

但是paper-fab的背景不受影响，被paper-fab的风格覆盖。

抱歉，因为各种文章都在解释 Polymer 中样式的使用。但是没有一个明确和简单到可以说“如果您过去曾经像这样导入样式......那么现在就这样做......”

Answer 1

样式表应该在你的 dom-module 内导入，但在模板之外。此外，您应该指定 rel="import和 type="css" .您可以在 documentation 中找到更多信息.

<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>

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

This experimental feature is now deprecated in favor of style modules. It is still supported, but support will be removed in the future.