TLDR;跳到问题部分 👍
背景
我们有一个非常大的单体式遗留应用程序。我们正在将功能剥离到一个新的应用程序中。
这两个应用程序在截然不同的体系结构和技术中内置了截然不同的 UI。由于我们的用户将在两者之间自由导航，目前，我们需要在某种程度上统一UI，以便过渡不会那么刺耳。
我们决定有一个大的CSS覆盖样式表，我们只是在旧应用程序的顶部加载(这样我们就可以花更多的时间专注于新应用程序(。这张纸虽然很大，但有效。
我们的旧版应用有一个根 CSS 文件，无论如何(有些是经典 ASP，有些使用母版页，有些是手动的(。
问题所在
因此，我们决定在根样式表中使用 @import 标记来拉取我们的重新样式覆盖。
虽然我们承认阻止页面呈现是一种可怕的反模式，但我们需要这种行为来防止旧 UI 闪烁，直到覆盖表接管。
我们认为头部的CSS会阻止页面的呈现，直到它加载，但它似乎没有等待导入的CSS。这是与导入相关的预期行为吗？有没有办法让用户代理等待？有关如何实现这一目标的任何信息将不胜感激。
谢谢
无法将另一个 CSS 文件同步应用于它嵌入的 CSS 文件。但是，由于您已经在这个项目中做了很多工作，因此我可以提出以下建议：
(但在此之前：所有这些都不是很好，更不用说最佳实践了，而且肯定有一些危险。
在- 关键部分隐藏 GUI：在根样式表中添加一个 CSS 规则，用于隐藏 GUI，并在新样式表中添加另一个 CSS 规则，以覆盖它并再次显示 GUI。
- 如果可以向所有 HTML 页面添加内容：添加加载屏幕。类似于
<div class="loading-screen" style="display:fixed;top:0;left:0;width:100vw;height:100vh;background-color:white;z-index:1000">Loading...</div>
的东西，并用新的sytylesheet再次隐藏它：.loading-screen { display: none; } - 多合一：抛弃使用
@import的想法，将新样式表的内容写在根样式表中。
最佳做法可能是重新设计孔场地结构，或者至少返工/删除旧的 GUI 样式。