通过 Webpack 5 模块联合提供样式和资源

Question

我已经在我的 Angular 11 应用程序中成功实现了相对较新的 webpack 5 模块联合系统，因此它可以从另一个版本按需远程加载模块。

我一无所获的一件事是如何处理样式表和图像等资源。例如，联合模块中有一个菜单元素需要自己的样式：

• 将它们放入组件的样式表中会使块膨胀，编译器会抱怨这一点，而且在显示菜单之前它们不会加载
• 如果样式位于联合模块的全局样式表上，则它们根本不会加载，因为我请求的是子模块而不是主模块（我认为）
• 该样式特定于联合模块，因此不能将其放入加载应用程序中

我认为这些样式可以被编译并放入联合模块的构建资产中，但是当它在有联合和没有联合的情况下使用时，这会破坏链接。

我仍在尝试这个，但我认为最好问一下。有人遇到过这个问题吗？

Answer 1

我认为实现这一点的最优雅的方法是将微前端的全局 styles.scss 导入到它的入口模块 component.scss 和入口模块 component.ts 中，以encapsulation: ViewEncapsulation.None打破它的样式封装，这将在成为该风格在全球范围内应用的领导者。