html – Polymer 1.1中的共享样式和外部样式表

我已经阅读了polymer 1.1中的新 style modules推荐,它的工作非常精彩.

我的问题在这里,与旧的方法一样,我怎样才能将我的所有CSS移动到CSS文件而不只是将它放在< style>之间. HTML中的标签？

这是一个例子.

我有一个自定义< ot-subscribe>看起来像这样的元素：

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

我为什么需要这个？一个字：Sass.

有没有人遇到过这个问题？有没有人找到解决方案？

或者总结一下我的问题,如何使用聚合物Sass？

解决方法

据我所知,这是不支持的.有些工具可以自动从CSS文件创建样式模块.

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

>构建步骤：https://github.com/MaKleSoft/gulp-style-modules
>网络服务：https://poly-style.appspot.com/demo/