Question

我已经阅读了Polymer 1.1中的新style modules建议，它的工作非常精彩。

我的问题在这里，再次，与旧方法一样，我如何将所有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。

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

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

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中的共享样式和外部样式表

1 个答案: