我已经阅读了 Polymer 1.1 中的新 样式模块 推荐,并且它运行得非常好。
我的问题在于,如同之前的方式一样,我该如何将所有的 CSS 移到一个 CSS 文件中,而不仅仅是放置在 HTML 的
这里有一个例子。
我有一个自定义的
我的问题在于,如同之前的方式一样,我该如何将所有的 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?