Vaadin14: @HtmlImport ignored?

Flow
1

Hi,

my main view is something like:

@Route(value = "")
@Theme(value = Lumo.class)
@HtmlImport("frontend://styles/style.html")
@StyleSheet("frontend://styles/style.css")
@SuppressWarnings("serial")
public class AViewHost extends Div implements ErrorHandler, PageConfigurator {

while style.html contains:

<custom-style>
    <style>
        body { /* FIXME */
            background-color: red !important;
        }
    </style>
</custom-style>

style.css is loaded and parsed properly.

style.html is loaded properly if you point the browser to localhost:8081/frontend/html/style.html, but Vaadin14 seems to ignore it.

Any help? I tried to read https://github.com/vaadin/vaadin-themable-mixin but had no luck.

Thanks,
MZ

2

If you’re using not using Compatibility mode (aka Bower mode), @HtmlImports are ignored; you should use @JsModule and JavaScript modules instead. Read more here: https://vaadin.com/docs/v14/flow/v14-migration/v14-migration-guide.html

3

Olli, thank you so much for pointing me to the right direction.

Is there any reason for JS modules to be put in a frontend/ directory under the project’s root instead of src/main/webapp/frontend/? This looks quite inconsistent.

Thanks again,
MZ

4

src/main/webapp/frontend/ is a web folder.
frontend/ is not available anyhow in the resulting web application as resources.

Everything is bundled using webpack into one file. So no any single js module is loaded from anywhere.

5

Thanks Denis, I can see the point in what you say.
(Still, I would have used src/main/frontend/, as js modules are source code too… :slight_smile:

Thank you so much,
MZ

6

Olli and Denis, thanks again: your posts helped me to reach the goal.

MZ