Documentation

Documentation versions (currently viewingVaadin 24.4 (pre))

Flow @CssImport Annotation

Information on the legacy CssImport annotation for importing stylesheets.

The @CssImport annotation was used in earlier versions of Vaadin Flow to load stylesheets into the application. It takes an optional themeFor parameter that can be used to inject CSS into the Shadow DOM of a Vaadin component by providing a string matching the component’s root element name.

@CssImport("global-styles.css")
@CssImport(value = "text-field-styles.css", themeFor = "vaadin-text-field")
public class MyUI extends Div {
    …
}

Although this mechanism still works, the application theme folder is now the recommended approach for loading application styles. It also supports injection of Shadow DOM styles into Vaadin components through the components sub-folder. @CssImport is still useful for loading stylesheets into custom standalone components, however.