Vaadin micro-frontend css handling - vaadin

Question

I'm trying to implement microfrontend with Vaadin 14. I've managed to accomplish a working version thanks to the Vaadin official documentation and various examples on github, using WebComponentExporter. However I cannot find any information about using css in these exported webcomponents. I've tried putting #CssImport everywhere, with no success.
I'm pretty much in the same situation as Stuart in this unanswered Vaadin forum question: https://vaadin.com/forum/thread/18466808/cssimport-when-using-component-exporter
Since that forum is now read only, I'm hoping to find a solution here.

Answer 1

Try follow this tutorial https://vaadin.com/docs/v14/flow/integrations/embedding/tutorial-webcomponent-theming:
Add #Theme annotation on top of your exporter class:
#Theme(themeFolder = "my-theme")
public class MyComponentExporter extends WebComponentExporter<MyComponent> {
// ...
}
Add styles.css to your ${project.root}/frontend/themes/my-theme/ and put there your styles which will apply to your component shadow DOM (to target the document DOM, place your styles in document.css), like this:
:host {
// MyComponent's background color to blue
background-color: blue;
}
I tested it with V14 + Vaadin Portlet + Liferay 7.3 and it works in both production and dev modes. Vaadin Portlets are based on embedded components, so it should work also for regular servlet-based Vaadin applications.

Answer 2

Try to compile with the production profile. The microfrontends examples do not comment on it but if you are not with the production profile they do not work, at least in my case.
Check that the webpack.config.js file is not filtering the css files.
Check that the css files are in the correct frontend folder.