Geek Answers Handbook

General Styles and External Style Sheets in Polymer 1.1

I read the new module style in Polymer 1.1 and it works great.

My problem here, again, as in the case of the old approach, how can I move all my CSS to a CSS file, and not just put it between the tag <style>in the HTML?

Here is an example.

I have a custom element <ot-subscribe>that looks like this:

<dom-module id="ot-subscribe">
    <template>
        <style>
            paper-input {
                --paper-input-container-underline: {
                    display: none;
                };
                --paper-input-container-underline-focus: {
                    display: none;
                };
            }
        </style>
        <form is="iron-form">
            <paper-input placeholder="{{labelPlaceholder}}" no-label-float></paper-input>
            <ot-button submit class="button-secondary">{{labelSubscribe}}</ot-button>
        </form>
    </template>
</dom-module>

As you can see, I have paper-inputone for which I want to hide underscores.

This example works great.

Now I need to move this CSS to an external CSS file, but it will all work the same way. So the final markup will look something like this (I added comments to explain the various approaches I tried).

<dom-module id="ot-subscribe">
    <template>
        <!-- Both of these have absolutely no effect -->
        <style type="text/css" src="external.css"></style>
        <style src="external.css"></style>

        <!-- This DOES work, however only for regular CSS, no custom properties or mixins would work -->
        <!-- Also, it deprecated: https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets -->
        <link rel="import" type="css" src="external.css">

        <!-- Using a style module DOES work, however we're just moving the issue, not solving it, since the CSS must still be in the HTML not in an external CSS file -->
        <style include="shared"></style>

        <form is="iron-form">
            <paper-input placeholder="{{labelPlaceholder}}" no-label-float></paper-input>
            <ot-button submit class="button-secondary">{{labelSubscribe}}</ot-button>
        </form>
    </template>
</dom-module>

? : Sass.

- ? - ?

, Sass Polymer?

+4

More articles:


All Articles