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.
Import valo, css lost
Hello,
I have created a customelized theme by extending the theme valo, but when i added the new css, i have a problem:
In style.scss:
@import "../valo/valo";
.my-theme {
@include valo;
.v-listbuilder .v-button-caption {
width: 11px;
height: 11px;
background-repeat: no-repeat;
background-position: left bottom;
padding-top: 3px;
display: inline-block;
}
.v-grid-row.grayed {
color: gray;
text-decoration: line-through;
}
}
Then i get this from fireDebug at the end of the css file:
.my-theme .v-listbuilder .v-button-caption {
background-position: left bottom;
background-repeat: no-repeat;
display: inline-block;
height: 11px;
padding-top: 3px;
width: 11px;
}
.my-theme .v-grid-row.grayed {
text-decoration: line-through;
}
And the layout is not what i want.
Anyone knows this? Thanks.
Could please elaborate a bit, what's the actual problem here? Could you post an full project that demonstrates the issue?
Probably shouldn't be defining your theme in styles.scss, but in <your-theme>.scss. The former does contain the following suggestion:
This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
The actual styles should be defined in <your-theme>.scss