I need to add @CssImport into interface for some common functionality but it is not working when i used @CssImport to the interface.
Could you please clarify what do you mean by “it does not work” ?
Do you mean that the CSS is not used on the page in the resulting application ?
How do you run the application ? In dev mode/production mode ?
Which platform/Flow version do you use ?
Denis Anisimov:
Could you please clarify what do you mean by “it does not work” ?Do you mean that the CSS is not used on the page in the resulting application ?
How do you run the application ? In dev mode/production mode ?
Which platform/Flow version do you use ?
Actually I have common component across the application so i created the common interface across the application and I put @CssImport annotation to interface so i don’t need to do to all components. so when i put @CssImport into interface than my style is not applying but when i put into the class than it applies.
// Interface
public interface BaseLayout extends HasElement, ComponentPreparator, AttachNotifier, DetachNotifier {
default void dynamicallyChangedTheme(String primaryColor, String secondaryColor) {
VaadinSession.getCurrent().setAttribute(ThemeConstants.THEME_FIRST_COLOR, primaryColor);
VaadinSession.getCurrent().setAttribute(ThemeConstants.THEME_SECOND_COLOR, secondaryColor);
getElement().getStyle().set("--lumo-primary-color", primaryColor);
getElement().getStyle().set("--lumo-primary-text-color", primaryColor);
getElement().getStyle().set("--theme-color-first", primaryColor);
getElement().getStyle().set("--theme-color-second", secondaryColor);
}
}
// Class
@CssImport("frontend://styles/components/applayout/app-layout.css")
@CssImport("frontend://styles/components/button.css")
@CssImport("frontend://styles/components/label.css")
@CssImport("frontend://styles/style.css")
@CssImport("frontend://styles/misc/box-shadow-borders.css")
@CssImport("frontend://styles/misc/h2.css")
@StyleSheet("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap")
@CssImport(value = "frontend://styles/components/text-area.css", themeFor = "vaadin-text-area")
@CssImport(value = "frontend://styles/components/text-field.css", themeFor = "vaadin-text-field")
@CssImport(value = "frontend://styles/components/combo-box-item.css", themeFor = "vaadin-combo-box-item")
@CssImport(value = "frontend://styles/components/combobox.css", themeFor = "vaadin-combo-box")
@CssImport(value = "frontend://styles/components/checkbox.css", themeFor = "vaadin-checkbox")
@CssImport(value = "frontend://styles/components/grid.css", themeFor = "vaadin-grid")
@CssImport(value = "frontend://styles/components/radio-button.css", themeFor = "vaadin-radio-button")
@CssImport(value = "frontend://styles/components/dialog-overlay.css", themeFor = "vaadin-dialog-overlay")
public abstract class AbstractBaseLayout extends AppLayoutRouterLayout<LeftLayouts.LeftResponsiveHybrid> implements RouterLayout, BaseLayout {
/**
*
*/
private static final long serialVersionUID = 1L;
@Value("${primary.color}")
String primaryColor;
@Value("${secondary.color}")
String secondaryColor;
@PostConstruct
private void postConstruct() {
dynamicallyChangedTheme(primaryColor, secondaryColor);
prepare();
}
}
How do you run the application ? In dev mode/production mode ? Which platform/Flow version do you use ?
You don’t need to put the same @CssImport
to any component in your app.
It’s enough to use them only for one component by the way.
Denis Anisimov:
How do you run the application ? In dev mode/production mode ? Which platform/Flow version do you use ?
It is in dev mode and i am using vaadin version 14.0.8
There were some changes how it works.
Please try the latest 14.0.9
.
If it still doesn’t work then this is a bug, please create a ticket.