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

Question

我已经阅读了 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>

如您所见，我有一个 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.

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

或者总结一下我的问题，Sass 和 Polymer 到底是怎么用的？

Answer 1

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

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

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

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

Shared styles and external stylesheets in Polymer 1.1

html

css

sass

web-component

polymer