Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Trying to extend touchkit theme
What I need to do is add one tiny style change to the touchkit theme. Specifically I want to add this:
.v-textfield-align-right {
text-align: right;
}
I got it working just fine in my application. I created directory VAADIN/themes/mytouchkit
and in there I put mytouchkit.scss, addons.scss and styles.scss. The addons file is a copy of the one that was generated by the maven archetype with no change. The mytouchkit.scss looks like this:
@import "mytouchkit.scss";
@import "addons.scss";
.mytouchkit {
@include addons;
@include mytouchkit;
}
and the mytouchkit.scss looks like this:
@import "../touchkit/touchkit.scss";
@mixin mytouchkit {
@include touchkit;
.v-textfield-align-right {
text-align: right;
}
}
Like I said that works. Then I got ambitious and decided this mytouchkit theme would be better in a library, and that doesn't work for me. In my jar file I have
- a java class extending BaseTheme with a THEME_NAME String which names the theme. I'm fairly sure that is okay because it does find the theme.
- an addons.scss, identical to the one above
- styles.css identical to the one above
- mytouchkit.scss which is probably where the problem is
The mytouchkit.scss file fails to import the touchkit.scss file. I checked in the touchkit jar file and there is no such scss file, though it is odd that it worked before I tried bundling it into a jar file. I've tried changing it to import the css file I can see in the jar but that gives a different error:
CSS imports can only be used at the top level, not as nested imports. Within style rules, use SCSS imports.
Is there a better way to do this?
Heh. Nothing like explaining the problem carefully (see above) to come up with a solution yourself.
I noticed that the theme in the application was working, as I said, but it was giving an error about not finding the touchkit import. So I tried just taking it out and now mytouchkit.scss looks like this:
@mixin mytouchkit {
.v-textfield-align-right {
text-align: right;
}
}
That works, including when it is in the jar file, and I can't see any errors in the log now. So it's all good. I think the touchkit theme must be getting into the application some other way, but it isn't an scss theme so I guess that makes enough sense.