Gemeinsame Stile und externe Stylesheets in Polymer 1.1

Question

Ich habe die neue style modules Empfehlung in Polymer 1.1 gelesen und es funktioniert wunderbar.

Mein Problem hier wieder, wie mit dem alten Ansatz ist, wie könnte ich alle meine CSS in eine CSS-Datei verschieben und nicht nur zwischen einem <style> Tag im HTML?

Hier ist ein Beispiel.

Ich habe eine benutzerdefinierte <ot-subscribe> Element, das wie folgt aussieht:

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

Wie Sie sehen, ich habe eine paper-input, für die ich die Unterstreichungen ausblenden möchten.

Dieses Beispiel funktioniert gut.

Nun, ich brauche, dass CSS in einer externen CSS-Datei zu bewegen, aber halten sie alle genau funktioniert gleich. Das finale Markup würde also ungefähr so ​​aussehen (ich habe Kommentare hinzugefügt, um die verschiedenen Ansätze zu erklären, die ich versucht habe).

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

Warum brauche ich das? Ein Wort: Sass.

Hat sonst noch jemand jemals dieses Problem gestoßen? Hat jemand eine Lösung gefunden?

Oder meine Frage zusammenfassen, wie das Heck benutzt man Sass mit Polymer?

Answer 1

Soweit ich weiß, wird dies nicht unterstützt. Es gibt Werkzeuge, die automatisch Style-Module aus CSS-Dateien erstellen.

https://github.com/Polymer/polymer/issues/2429

• Erstellungsschritt: https://github.com/MaKleSoft/gulp-style-modules
• Webdiensts: https://poly-style.appspot.com/demo/