Angular 7 - CSS 自定义属性(CSS 变量)

Question

我正在尝试寻找解决方案，如何将 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 配置。

我能做什么:

• 当然，我可以创建自己的 @mixin在 .scss用于处理属性、值作为参数，然后使用 CSS 变量 返回 fallback + 值，但我不确定 future 是否不会出现问题，因此，我会更乐意使用已经存在的解决方案(例如 CSSNext)。

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

问候，

醒目..

Answer 1

作者 css-vars-ponyfill这里。

您无需启用 watch 选项即可在您的 Angular 应用程序中使用 ponyfill。如果您愿意，您可以随时手动调用它(在启动主题更改、路由更改、组件安装等之后)。 watch 选项是一个很好的“设置后忘记”选项，大多数人都喜欢它的简单性。

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

希望这对您有所帮助。随意开一个issue on GitHub如果您有任何问题或想进一步讨论。