因此有机会在需要的地方将全球风格引入

RAHIM26

到我们的弗兰肯斯坦包装中，对于此类迁移的成功至关重要。在我们讨论示例之前，请记住，这部分对于您选择的几乎任何框架都是相同的 - 无论是 还是任何其他使用全局样式表的框架！ 让我们回到Vue 应用程序中的 Header 组件。看看这个导; 复制 这个导入是我们引入全局样式表的地方。在本例中，我们从组件本身进行操作。这只是使用全局样式表来设置组件样式的一种方法，但在您的应用程序中不一定是这样的。 某些父模块可能会添加一个全局样式表，就像在我们的 React 应用程序中一样，我们仅在 中导入然后我们的组件期望它在全局范围内可用。您的组件的样式甚至可能依赖于样式表，没关系。然而，重要的是您应该期望在 Alien 组件中导入全局样式表（如果它不会损害 Alien 应用程序）或在 Frankenstein 包装器中显式导入。

否则，包装器将不知道 Alien 组件除了已经与其捆绑的样式表之外还需要任何 美国手机号码列表  样式表。 小心。如果 Alien 组件之间要共享许多全局样式表，并且您有很多这样的组件，则这可能会在迁移期间损害您的 Host 应用程序的性能。 以下是如何在React 组件的 Frankenstein 包装器中导入 Header 组件所需的全局样式表复制 尽管如此，通过这种方式导入样式表，我们仍然将样式引入 Host 的全局范围，而我们需要的是将样式拉入 Shadow DOM。我们如何做到这一点？ 全局样式表和 Shadow DOM 的 Webpack 配置 首先，您可能需要添加显式测试以确保我们仅处理来自 Alien 的样式表。对于我们的 React 迁移，它看起来类似
除此之外，任何框架的配置都是相同的。接下来，让我们指定该块所需的加载器。



复制 有两件事需要注意。首先，如果您正在处理 Alien 应用程序的 CSS 模块，则必须modules: true在 的css-loader配置中指定。 其次，我们应该<style>在将样式注入 Shadow DOM 之前将样式转换为标签。就 Webpack 而言，我们使用 此加载程序的默认行为是将样式插入文档的头部。通常。这正是我们不想要的：我们的目标是将样式表放入 Shadow DOM 中。然而，就像我们target在 React 中使用样式组件的属性或shadowMode使用 Vue 组件的选项来为标签指定自定义插入点一样<style>，常规style-loader为我们提供了几乎与任何样式表相同的功能：配置选项正是insert有帮助的我们实现了我们的首要目标。好消息！让我们将其添加到我们的配置中。 复制 然而，并不是一切都那么顺利，有一些事情需要记住。