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

【问题标题】：Angular 7 - CSS Custom Properties (CSS Variables)Angular 7 - CSS 自定义属性（CSS 变量）
【发布时间】：2019-04-12 22:49:23
【问题描述】：

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

我发现了什么：

CSS Vars Ponyfill

用于查看内联样式的 JS 库，<styles> 或 <link> HTML 标签，但要使用它，我必须启用此插件的 watch 选项意味着什么，注意 DOM 中的任何变化（我不喜欢这个解决方案）

CSS Next

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

我能做什么：

当然，我可以在.scss 中创建自己的@mixin 来处理属性、值作为参数，然后使用CSS 变量 返回回退+ 值，但我不确定是否不可能未来的问题，所以，我会更高兴已经存在的解决方案（例如CSSNext）。

请问您知道如何实现这一目标吗？谢谢。

问候，

醒目的..

【问题讨论】：

标签： angular postcss autoprefixer css-variables cssnext

【解决方案1】：

css-vars-ponyfill 的作者在这里。

您不必启用 watch 选项即可将 ponyfill 与您的 Angular 应用程序一起使用。如果您愿意，您可以随时手动调用它（在启动主题更改、路由更改、组件挂载等之后）。 watch 选项只是一个不错的“设置后忘记它”选项，大多数人都喜欢它的简单性。

最近发布了 ponyfill 的 2.x 版本，它支持增量更新，因此与 1.x 相比也提供了不错的性能提升。

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

【讨论】：

@jildenbiddle 使用手表会提高加载时间吗？在 Angular 中，我在根组件 oninit 处初始化 cssvars({options:)}。在 ie11 中，我的 polyfill 启动之前有明显的延迟。
@Winnemucca - 不太可能。首先要做的是确定 ponyfill 调用是否被延迟（即在 ponyfill 之前您的应用程序在做什么）或者 ponyfill 是否需要很长时间才能完成。这些是单独的问题。如果您需要进一步的帮助，请随时在 GitHub 上打开一个问题，我们可以进一步讨论。