Polymer 具有自定义类的图元的聚合物样式不'；硫化时不起作用

我正在尝试为聚合物应用程序制作一个全球主题

我在主题文件中定义了一些变量，如下所示

#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

定义放在一个普通的.css文件中，那么它就可以工作了，只是当变量不在聚合物系统中时，我显然不能使用它，这就破坏了它的用途

这一切在开发过程中都可以正常工作，但在生产过程中硫化时就不起作用了

如何正确定义全局样式，以便任何带有

.primary

类的

纸张按钮

都可以从

自定义样式

定义中应用自定义样式，该定义在硫化时也可以工作

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

我查看了我的硫化html文件（该文件是使用默认的yeoman/polymer starter kit gulp任务构建的），并用指向实际元素的链接（如

it works！）替换了在那里压扁的自定义样式

当代码完全相同时，为什么压扁/硫化会导致这种情况发生？我该如何应对

----固定的----

问题是硫化时混合物和变量之间的界限

: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

括号并打开一个新括号

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

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