如何将 CSS 成功导入 Polymer

Question

这是一个 101 问题，但我正在尝试将我的 css 样式从我的 HTLM 聚合物代码外部化到一个单独的 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 中样式的使用。但是 none 明确而简单地说 "if you used to import styles in the past like this..... then now do it like so..."

Answer 1

样式表应在您的 dom 模块中导入，但在模板之外。此外，您应该指定 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.

如何将 CSS 成功导入 Polymer

How to import CSS successfully into Polymer

javascript

polymer