Vaadin 微前端 css 处理答案

【问题标题】：Vaadin micro-frontend css handlingVaadin 微前端 css 处理
【发布时间】：2021-09-08 15:06:13
【问题描述】：

我正在尝试使用 Vaadin 14 实现微前端。感谢 Vaadin 官方文档和 github 上的各种示例，使用 WebComponentExporter，我已经成功地完成了一个工作版本。但是我找不到任何关于在这些导出的 web 组件中使用 css 的信息。我尝试将@CssImport 放在任何地方，但没有成功。

在这个未回答的 Vaadin 论坛问题中，我和 Stuart 的情况差不多：https://vaadin.com/forum/thread/18466808/cssimport-when-using-component-exporter

由于该论坛现在是只读的，我希望在这里找到解决方案。

【问题讨论】：

标签： vaadin web-component vaadin14 micro-frontend

【解决方案1】：

试试看这个教程https://vaadin.com/docs/v14/flow/integrations/embedding/tutorial-webcomponent-theming:

在导出器类的顶部添加 @Theme 注释：

    @Theme(themeFolder = "my-theme")
    public class MyComponentExporter extends WebComponentExporter<MyComponent> {
       // ...
    }

将styles.css 添加到您的${project.root}/frontend/themes/my-theme/ 并将您的样式放在您的组件影子DOM 中（要定位文档DOM，请将您的样式放在document.css 中），如下所示：

:host {
    // MyComponent's background color to blue
    background-color: blue;
}

我使用 V14 + Vaadin Portlet + Liferay 7.3 对其进行了测试，它可以在生产和开发模式下运行。 Vaadin Portlet 基于嵌入式组件，因此它也应该适用于常规的基于 servlet 的 Vaadin 应用程序。

【讨论】：

【解决方案2】：

尝试使用生产配置文件进行编译。微前端示例不会对此发表评论，但如果您不使用生产配置文件，它们将不起作用，至少在我的情况下。

检查 webpack.config.js 文件是否没有过滤 css 文件。

检查 css 文件是否在正确的前端文件夹中。

【讨论】：