聚合物CSS变量不被替换

我已经继承了前端使用Polymer构建的Web应用程序。当我运行各种Docker命令时，主要是的作品，但有一些CSS问题。具体来说，一些聚合物风格似乎并未被编译。例如，与<paper-dialog>元件，颜色变量没有被替换：聚合物CSS变量不被替换

.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中有点遗憾。有没有明显的步骤，我错过了没有记录在项目中？

来源

2017-05-08 whiterook6

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

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

来源

2017-05-08 23:47:42 tony19

CSS custom properties（又名变量）是一种非聚合物特有的网络技术，大多数浏览器都支持它，所以很可能它们并不意味着要在您的项目中进行编译或替换。

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

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

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

来源

2017-05-08 23:48:23

我认为这是直接从纸上聚合物元件来了 - 我们没有触及该元素中的任何代码。它的样式应该正常编译到什么程度？编译的聚合物样式表是否包含css变量？我不愿意改变输出的CSS，因为（我认为）它会被下一次硫化覆盖。 – whiterook6

我不知道你的构建过程是什么样子，但就像我说CSS定制属性是由大多数浏览器支持的，所以我不希望它们被编译或替换。浏览器可以理解它们，或者对于旧版本的浏览器，它们可以通过ShadyCSS等polyfill处理。 –

聚合物CSS变量不被替换

回答

相关问题