Angular 7-CSS自定义属性（CSS变量）

Question

我正在尝试找到解决方案，如何使用最新版本的Angular（7.0.1）和Angular Material（7.0.2）将CSS变量的polyfill / fallback集成到项目中。问题是ng eject目前处于禁用状态，因此，我无法编辑使用 PostCSS 的 Autoprefixer 的配置，该插件已经存在，因此插件会回退较旧的浏览器。

我发现的东西：

CSS Vars Ponyfill

• JS库，用于监视内联样式，<styles>或<link> HTML标记，但是要使用此标记，我必须启用此插件的watch选项，这意味着监视DOM中的任何更改（我不喜欢这种解决方案）

CSS Next

• PostCSS 的插件（在Angular构建中用作 Autoprefixer ）。我认为，这是最好的解决方案，但是目前我无法编辑build / webpack配置。

我可以做什么：

• 当然，我可以在@mixin中创建自己的.scss来处理属性，值作为参数，然后使用 CSS变量返回后备+值，但是我不确定将来不会有任何问题，因此，对于已经存在的解决方案（例如 CSSNext ），我会更加满意。

请告诉我一些如何实现此目标的想法？谢谢。

此致

很动..

Answer 1

此处是css-vars-ponyfill的作者。

您无需启用watch选项即可将ponyfill与Angular应用一起使用。如果愿意，您可以随时手动调用它（启动主题更改后，更改路线时，安装组件等）。 watch选项是一个不错的“设置好后就忘了”选项，大多数人都喜欢它的简单性。

ponyfill的2.x版本最近已发布，它支持增量更新，因此与1.x相比也具有出色的性能。

希望这会有所帮助。如果您有任何疑问或想进一步讨论，请随时打开issue on GitHub。