我已经阅读了新的 style modules Polymer 1.1 中的推荐，它工作得很漂亮。
与旧方法一样，我在这里的问题是如何将所有 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 ？
最佳答案
据我所知，这是不支持的。不过，有一些工具可以自动从 CSS 文件创建样式模块。
关于html - Polymer 1.1 中的共享样式和外部样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36473168/