CODEWITHSUNDEEP
vaadinvaadin-flow
benstpierre
benstpierre

Reputation: 33591

Intellij says Vaadin flow lumo theme css variables not found

Then working on my new Vaadin 14 based application Intellij cannot find the built in lumo theme variables...

enter image description here

These variables exist at runtime in my browser, but where can I point Intellij to see them?

Upvotes: 0

Views: 563

Answers (1)

anasmi
anasmi

Reputation: 2652

It looks like it's not possible, at the moment, unfortunately.

The problem is that starting from V14 styles you want to reference are packaged as.js files, but styles are written in .css. For example, if in V13 you could import them in your template like this Sizing and spacing:

<link rel="import" href="bower_components/vaadin-lumo-styles/sizing.html">

This would be the current way in V14 instead, which is a js file:

<script type=“module”>
import “@vaadin/vaadin-lumo-styles/sizing.js”;
</script>

So you can use those custom variables in your styles without problems, as long as you load an appropriate js module on your page (like this @JsModule(value="@vaadin/vaadin-lumo-styles/sizing.js") Lumo), but I haven't found a way (and not sure there is one) to make Intellij aware of them.

So the underlying problem is that you can't import a variable from a js file into a css file.

Upvotes: 1

Related Questions