CODEWITHSUNDEEP
javascriptpolymer
Paul Armstrong
Paul Armstrong

Reputation: 115

How to import CSS successfully into Polymer

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

  1. create style in my mystyles.css

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

  2. 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..."

Upvotes: 3

Views: 7403

Answers (1)

Maria
Maria

Reputation: 5604

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.

Upvotes: 13

Related Questions