logo标签列表

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

htmlcsssasspolymerweb-component
4
我已经阅读了 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中使用Sass？

1个回答
3
1
是的，最终我编写了一个自定义包装器来处理sass编译器，并生成相应的样式模块HTML文件以适配每个合格的CSS文件。对我来说，这似乎是一件很自然的事情，因为我已经使用这样的包装器来添加对polymer CSS mixins的支持，而这在SASS中还不是有效的语法（我的意思是：--custom-mixin: { color: red; };）。 - Tony Bogdanov
我遇到了类似的问题，但我的用例无法通过gulp模块或poly-style解决...我正在构建一个组件而不是应用程序，它依赖于一个CSS库的bower依赖项... - Pascal Gula
你可以在相关的问题（2429）中留下关于你使用情况的评论，或许会有更好的运气。我不知道有什么解决方法。 - Günter Zöchbauer
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接