在不同的文件夹中时，无法让共享样式在 Polymer 中工作

Question

我需要与我的所有 Polymer 组件共享相同的 CSS。根据我的搜索，直接将 link 与样式表放在一起已被弃用， core-style.

也是如此

所以我尝试使用我认为称为样式模块的东西。在一个名为 shared-styles.html 的单独文件中，我插入了我想要的 CSS，然后通过 <style is="custom-style" include="shared-styles"></style>.

导入它

当 shared-styles 与我的 element/component 位于同一文件夹中时，此方法有效，但在所有文件夹中一次又一次地复制和粘贴 CSS 不太实用，所以我想将样式保存在自己的文件夹中。但是，当我这样做时，样式会消失。

导入路径对我来说似乎是正确的，但无论哪种方式，我都试图改变它，但没有任何反应。

我已经尝试了很多其他的事情，例如在 link 标签中添加或删除 "async"，在样式标签中添加或删除 is=custom-style，但到目前为止没有任何变化。

我的一个想法是，也许问题在于我如何测试我的组件，因为 polymer server --open 只获取在组件文件夹中。

Here's a pen, but you can't really see the problem there, since I can't put the CSS in a different folder.

任何指导将不胜感激。

控制台错误：

127.0.0.1/:1 GET http://127.0.0.1:8081/shared-styles/shared-styles.html 404 (Not Found)
polymer.html:2654 Could not find style data in module named shared-styles

Answer 1

您似乎没有为 shared-styles 定义 dom-module id。

正确的 shared-styles/shared-styles.html 文件应该是：

<dom-module id="shared-styles">
   <template>
       <style>
          /** your CSS goes here **/
       </style>
   </template>
</dom-module>

Answer 2

伙计们，如果我的问题令人困惑，抱歉。

问题确实与 polymer server --open 相关，只获取组件文件夹 中的文件，因此忽略了不同文件夹中的样式。

我修复它的方法是在组件文件夹内创建一个指向外部文件夹的快捷方式，然后正常插入样式如下：

<link rel="import" href="shared-styles/shared-styles.html">

希望对大家有所帮助！

在不同的文件夹中时，无法让共享样式在 Polymer 中工作

Can't get shared-styles to work in Polymer when in different folder

css

polymer

polymer-1.0