Search code examples
javacsssassvaadin8vaadin-valo-theme

Override the existing Css in Vaadin

I need to override the existing css of ValoTheme, i added the new css rules in mytheme.scss ,i compile the theme , and run the application but still it is not update on UI.

  @mixin mytheme {
      @include valo;
      // Insert your own theme rules here

      .v-widget {
        box-sizing: border-box;
        vertical-align: top;
        text-align: right;
    }

    .v-slot, .v-spacing {
        display: -webkit-inline-box;
        white-space: nowrap;
        vertical-align: top;
    }
}

i tried to clean and refresh the project. how to update the UserInterface by Override of the existing css of valoTheme

Solution

  • Did you include the mixin in your scss ?

    In your example code, I saw that you declared a mixin by @mixin mytheme. But did you wrote @incude mytheme in your code ?

    Sass mixin and include: https://sass-lang.com/documentation/at-rules/mixin