Question

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

Answer 1

CSS custom properties（又名变量）是一种非聚合物专用的网络技术，并且得到大多数浏览器的支持，因此它们很可能无法在您的项目中进行编译或替换。

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

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

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

Answer 2

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

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

聚合物CSS变量未被替换

2 个答案: