如何从 Angular 5.2 的 IFrame 中引用 CSS（从 SCSS 编译）？答案

【问题标题】：How can I reference CSS (that was compiled from SCSS) from within an IFrame in Angular 5.2?如何从 Angular 5.2 的 IFrame 中引用 CSS（从 SCSS 编译）？
【发布时间】：2019-02-06 17:32:53
【问题描述】：

我正在尝试从 IFrame 中引用父应用程序中的 CSS 文件（我同时控制应用程序和 Iframe）。当我执行 ng serve 时，我的样式表是用 SCSS 编写的，然后似乎被编译为 CSS 并作为内联 style 元素写入 HTML 中的我的文档的 <header>。

从 IFrame 中访问 CSS 的正确方法是什么？我的第一个想法是更改输出实际 CSS 文件的过程，而不是直接编写 CSS，但我不确定它是如何配置的。也许我需要引入一个像 Gulp 这样的构建工具来为我处理这个问题并从 Angular 手中夺走它？

【问题讨论】：

标签： html css angular iframe sass

【解决方案1】：

iframe 的内部和外部（对于大多数意图和目的而言）是独立的环境。应用于一个的 CSS 不会影响另一个的呈现。

由于 iframe 的内部是另一个页面，因此您可以将 CSS 应用于该页面，就像应用于任何页面一样。

【讨论】：

感谢您的回复！我知道它们是独立的环境，但我希望我的 iframe 链接到父应用程序拥有的样式表，这样我就不必两次维护相同的样式（对于 <table>s 之类的东西）。也许常见的 SCSS 应该在它自己的工件中，主应用程序和 iframe 应用程序都自己编译和注入？
@Sammaron 我不完全清楚为什么您的大多数 CSS（或 SCSS，视情况而定）尚未像通常的做法那样与页面代码分开。无论如何，是的，您应该将大部分 CSS 分解为自己的工件，然后通过引用将其包含在每个页面中。
嗯。我绝对没有完全了解我在这方面的最佳实践，但we have a project structure a lot like this 这似乎意味着将 SCSS 打包在它自己的文件夹中，但仍然在同一个仓库中，因为代码并不奇怪。
@Sammaron 看起来是正确的，SCSS 最终应该编译成它自己的文件。反过来，这些应该包含在需要它们的每个页面中。

【解决方案2】：

我们决定采用的解决方案是手动编译 SCSS 并引用 IFrame 的 CSS 输出。最终，这一步应该是自动化的（使用 Grunt 或 Gulp 之类的工具），但目前我们只是手动执行此操作。

欢迎任何更好的解决方案！

【讨论】：