ポリマー1.1の共有スタイルと外部スタイルシート

Question

ポリマー1.1で新しくstyle modules勧告を読みました。これは美しく機能します。

以前のアプローチと同じように、HTMLファイル内の<style>タグの間に配置するだけでなく、すべてのCSSをCSSファイルに移動する方法もあります。

例を示します。

私はこのようになりますカスタム<ot-subscribe>要素があります：あなたは私は下線を非表示にするpaper-inputを持って見ることができるように

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

を。

この例はうまくいきます。

ここで、CSSを外部CSSファイルに移動する必要がありますが、すべて同じように動作させる必要があります。だから、最終的なマークアップは、私が試したさまざまなアプローチを説明するコメントを追加しました。

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

なぜこれが必要ですか？ 1つの単語：Sass。

誰もこの問題に遭遇しましたか？誰かが解決策を見つけましたか？

または私の質問を要約すると、一体どのようにポリマーとSassを使用しますか？

Answer 1

私が知る限り、これはサポートされていません。 CSSファイルから自動的にスタイル・モジュールを作成するツールもあります。

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

• ビルドステップ：https://github.com/MaKleSoft/gulp-style-modules
• Webサービス：https://poly-style.appspot.com/demo/