Question

我正在努力为聚合物应用制作一个全球主题。

我在这样的主题文件中定义了一些变量。

#global-theme.html
<style is="custom-style">

:root {
    --default-primary-color: #00BBD3;
    --primary-background-color: #FFF;
}

:root paper-button.primary {
    color: var(--primary-background-color);
    background-color: var(--default-primary-color);
}

</style>

然后在另一个元素中，我使用带有paper-button类的.primary ...但不应用.primary类样式。

<paper-button class="primary" id="search" on-click="onSearch">Search</paper-button>

如果我只是将paper-button.primary定义放在普通 .css文件中，那么它的工作原理除了我显然不能使用变量时它不在失败目的的聚合物系统。

这一切在开发时都能正常工作，但在硫化生产时不起作用

如何正确定义全局样式，以便任何paper-button .primary类custom-style从<link rel="import" href="../custom/my-polymer-theme/my-polymer-theme.html">定义中应用我的自定义样式，这在硫化时也有效？

-----更新-----

我查看了我的硫化html文件（使用默认的yeoman / polymer starter kit gulp任务构建）并替换了我在那里展平的自定义样式，其中包含指向{{1}等实际元素的链接} 有用！！

为什么在它完全相同的代码时会发生扁平化/硫化会导致这种情况发生？我将如何解决它？

----固定----

问题是mixin和amp;之间的界限。硫化时变量......

:root {
  /* dark theme mixin */
  --dark-theme-colors: {
   color: #fff;
   background-color: var(--secondary-text-color);
 };

 --dark-theme-secondary-text-color: var(--divider-color); 
 ...
}

当它被夷为平地的硫化html文件时，它不再起作用了。

要解决这个问题就像关闭:root括号并打开一个新括号一样简单。

具有定制类别的元素的聚合物造型在硫化时不起作用

0 个答案: