How to import CSS successfully into Polymer

Question

This is a bit of a 101 question, but I am trying to externalize my css styling from my HTLM polymer code into a separate CSS file.

From what I can make out this can be done through a .css file if you import it within a template element.

Eg

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

However, it appears that styles of elements I import and use from Polymer take precedent. So for example I may

create style in my mystyles.css

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

and then apply it
```
paper-fab class="my-background"..>...
```

But the background of paper-fab is unaffected, being override by the style of paper-fab.

Apologies, as various articles do go along way to explaining the use of styles in Polymer. But none are explicit and simple enough to say "if you used to import styles in the past like this..... then now do it like so..."

Maria Maria · Accepted Answer · 2015-08-02T06:02:57

Stylesheet should be imported inside your dom-module, but outside the template. Also, you should specify rel="import and type="css". You can find more information in the 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>

Update External stylesheets have been deprecated. From the documentation:

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

How to import CSS successfully into Polymer

1 Answers