Importing Standalone CSS Style Sheets
The easiest way to customize the look and feel of your application is to use the theming mechanism. This mechanism automatically takes care of importing the CSS style sheets that you place under a specific folder in your project. You should, therefore, consider using this mechanism as it’s the easiest way to customize your application’s styling.
However, you can also import standalone CSS style sheets manually using the @CssImport and the @StyleSheet annotations.
You should be familiar with Style Scopes to know whether you need to import a style sheet to the global scope or to a component scope. To learn where CSS files should be placed in your project, see Loading Resources.
Bundled Style Sheets
Use the @CssImport annotation to import style sheets in the application’s source code folder.
Bundled style sheets are included in the application bundle during a production build, together with other client-side resources.
Bundling is recommended for styles that change together with the application logic or component implementations, as the browser can cache them as a single unit of related resources.
// Import a style sheet into the global scope
@CssImport("./styles/shared-styles.css")
public class MyApplication extends Div {
}The @CssImport annotation can also be used to import CSS style sheets that target the shadow DOM of the components.
// Import a style sheet into the local scope of the TextField component
@CssImport(value = "./styles/text-field.css",
themeFor = "vaadin-text-field")External Style Sheets
The @StyleSheet annotation can be used to import style sheets from an external URL, or from a URL within your application.
The latter type of URLs are prefixed with context://, which points to the root of the public resources folder of your application.
External/linked style sheets can be used to import styles without including the contents in the application bundle. This allows the browser to load and cache the style sheet independently from the rest of the application.
External style sheets need to be accessible from a URL, and should be placed in the public resource folder in your web application.
For example, in a Spring Boot application, if the style sheet file is called shared-styles.css, then it should be placed in the src/main/resources/META-INF/resources folder, and it can be imported using the @StyleSheet annotation as follows:
@StyleSheet("shared-styles.css")
public class MyApplication extends Div {
}External style sheets can also be imported from outside your web application, for example from a different domain or a Content Delivery Network (CDN).
@StyleSheet("context://custom-font.css")
@StyleSheet("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
public class MyApplication extends Div {
}1A53B76F-A57F-4067-8457-9C607F66246B