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

Question

我已经阅读了Polymer 1.1中的新样式模块推荐，它运行得很好。

与旧方法一样，我在这里的问题是如何将所有CSS移动到一个CSS文件中，而不仅仅是将其放置在HTML中的<style>标记之间？

下面是一个例子。

我有一个自定义的<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>

正如你所看到的，我有一个paper-input，我想隐藏它的下划线。

这个例子很好用。

现在，我需要在一个外部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到底是如何与Polymer结合使用的？

Answer 1

据我所知，这是不受支持的。不过，也有一些工具可以从CSS文件中自动创建样式模块。

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

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