1

我继承了一个使用 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 中有点迷茫。有没有我错过的明显步骤没有在项目中记录？

4

2 回答 2

2

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

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

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

  background: var(--primary-background-color);
  color: var(--primary-text-color);
}
于 2017-05-08T23:48:23.500 回答
0

听起来您希望构建输出包含文字值而不是 CSS 变量，但CSS 变量不需要此字符串替换。浏览器自动使用 CSS 变量指定的值（在 polyfill 的帮助下）。

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

于 2017-05-08T23:47:42.127 回答