聚合物 CSS 变量没有被替换答案

【问题标题】：Polymer CSS variables not being replaced聚合物 CSS 变量没有被替换
【发布时间】：2017-10-07 02:29:45
【问题描述】：

我继承了一个使用 Polymer 构建的 Web 应用程序作为前端。当我运行各种 Docker 命令时，它大部分都可以工作，但存在一些 CSS 问题。具体来说，某些 Polymer 样式似乎没有被编译。例如，对于 <paper-dialog> 元素，颜色变量不会被替换：

.paper-dialog-0 {
  display: block;
  margin: 24px 40px;

  background: --primary-background-color;
  color: --primary-text-color;;;;
}

// ...

.paper-dialog-0  .buttons {
  position: relative;
  padding: 8px 8px 8px 24px;
  margin: 0;
  color: --primary-color;;;
}

在另一个例子中，一堆图标都被放置在一个顶部并且位置不正确。

我已经运行了项目附带的各种 Gulp 命令，其中包括对所有内容进行硫化。在大多数情况下，样式似乎确实是“聚合的”。我以前从未使用过 Polymer，所以我对如何将组件实际构建为 HTML 和 CSS 有点迷茫。是否有一个明显的步骤我错过了，但项目中没有记录？

【问题讨论】：

标签： css polymer css-variables

【解决方案1】：

听起来您希望构建输出包含文字值而不是 CSS 变量，但 CSS variables do not require this string replacement。浏览器自动使用 CSS 变量指定的值（在 polyfill 的帮助下）。

关于如何构建组件，这可能会有很大差异，但大多数 Polymer 项目使用polymer-cli 来构建（用于缩小、捆绑等）。您也可以拥有自己的 Gulp 脚本，该脚本使用 polymer-cli 的部分内容来最大限度地自定义构建（请参阅 custom-build template）。

【讨论】：

【解决方案2】：

CSS custom properties（也称为变量）是一种不特定于 Polymer 的 Web 技术，并且受大多数浏览器支持，因此它们很可能不打算在您的项目中编译或替换。

至于您的代码，有一个问题：要使用自定义属性，您必须使用var() CSS 函数：

.paper-dialog-0 {
  display: block;
  margin: 24px 40px;

  background: var(--primary-background-color);
  color: var(--primary-text-color);
}

【讨论】：

我认为这直接来自纸质聚合物元素——我们没有触及该元素中的任何代码。它的样式应该正常编译成什么？编译的聚合物样式表是否包含 css 变量？我不愿意更改输出 css，因为（我假设）它只会被下一次硫化覆盖。
我不知道你的构建过程是什么样的，但就像我说的大多数浏览器都支持 CSS 自定义属性，所以我不希望它们被编译或替换。浏览器可以理解它们，或者对于旧版浏览器，它们由诸如 ShadyCSS 之类的 polyfill 处理。