Skip to content

Added mentions of non-Spring folder for stylesheets. #5043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rolfsmeds merged 9 commits into from
Jan 8, 2026
Merged

Added mentions of non-Spring folder for stylesheets. #5043

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0d49448
Added mentions of non-Spring folder for stylesheets.
rolfsmeds Jan 2, 2026
bc3ddfe
Merge branch 'main' into docs/alternate-stylesheet-folder
rolfsmeds Jan 2, 2026
042b2e5
Merge branch 'main' into docs/alternate-stylesheet-folder
mcollovati Jan 7, 2026
abe394f
Further clarifications on static resource folder location
rolfsmeds Jan 8, 2026
ea56a57
Merge branch 'docs/alternate-stylesheet-folder' of https://github.com…
rolfsmeds Jan 8, 2026
d593884
Merge branch 'main' into docs/alternate-stylesheet-folder
rolfsmeds Jan 8, 2026
ebbcdc8
Merge branch 'docs/alternate-stylesheet-folder' of https://github.com…
rolfsmeds Jan 8, 2026
9a81224
Update articles/upgrading/index.adoc
rolfsmeds Jan 8, 2026
595b7e0
Rephrased "compiled into WARs" as "packaged as WARs"
rolfsmeds Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion articles/styling/advanced/dynamic-stylesheets.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

Stylesheets can be loaded dynamically based on application logic on the server side. This can be useful, for example, to load styles based on the current user, or to allow the user to switch between different themes, manually.

This is done using the `addStyleSheet` method on the [classname]`Page` class, which takes a URL parameter. The URL can point either to a stylesheet served by the application itself, located in the resource folder `src/main/resources/META-INF/resources`, or to an external URL.
This is done using the `addStyleSheet` method on the [classname]`Page` class, which takes a URL parameter. The URL can point either to a stylesheet served by the application itself, located in the resource folder (`src/main/resources/META-INF/resources` for Spring apps, or `src/main/webapp` for non-Spring apps), or to an external URL.

Check warning on line 14 in articles/styling/advanced/dynamic-stylesheets.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Terms] Prefer 'applications' over 'apps'.

Raw Output:
{"message": "[Vaadin.Terms] Prefer 'applications' over 'apps'.", "location": {"path": "articles/styling/advanced/dynamic-stylesheets.adoc", "range": {"start": {"line": 14, "column": 308}}}, "severity": "WARNING"}

Check warning on line 14 in articles/styling/advanced/dynamic-stylesheets.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Terms] Prefer 'applications' over 'apps'.

Raw Output:
{"message": "[Vaadin.Terms] Prefer 'applications' over 'apps'.", "location": {"path": "articles/styling/advanced/dynamic-stylesheets.adoc", "range": {"start": {"line": 14, "column": 266}}}, "severity": "WARNING"}

[source,java]
----
Expand Down
2 changes: 1 addition & 1 deletion articles/styling/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Vaadin applications are primarily styled with CSS in style sheets, just like any

== Stylesheets

<<{articles}/styling/stylesheets#, Stylesheets>>, placed in the `src/main/resources/META-INF/resources` folder, are loaded with the [annotationname]`@StyleSheet` annotation.
In Spring-based projects, <<{articles}/styling/stylesheets#, stylesheets>> are placed in the `src/main/resources/META-INF/resources` folder, and in non-Spring projects in the `src/main/webapp` folder. They are loaded with the [annotationname]`@StyleSheet` annotation.

In most cases you should apply [annotationname]`@StyleSheet` annotations to the main application class that implements the [interfacename]`AppShellConfigurator` interface. This ensures that the CSS in it is applied globally, up-front, when the application UI is loaded into the browser.

Expand Down
4 changes: 3 additions & 1 deletion articles/styling/stylesheets.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ order: 10

= Stylesheets

Stylesheets are placed in the `src/main/resources/META-INF/resources` folder, and are loaded with the [annotationname]`@StyleSheet` annotation.
In Spring-based projects, stylesheets are placed in the `src/main/resources/META-INF/resources` folder. In non-Spring projects, they are placed in the `src/main/webapp` folder.

In both cases they are loaded with the [annotationname]`@StyleSheet` annotation.

In most cases you should apply [annotationname]`@StyleSheet` annotations to the main application class that implements the [interfacename]`AppShellConfigurator` interface. This ensures that the CSS in it is applied globally, up-front, when the application UI is loaded into the browser.

Expand Down
2 changes: 1 addition & 1 deletion articles/upgrading/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@ One exception is the `@vaadin/react-components/css/lumo/Utility.module.css` CSS
These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your application to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions.

* Refactor component styles from shadow DOM styles to normal CSS (this was the recommended approach already in V24). (The _Styling_ sub-pages in the component documentation provide lists of css selectors and style properties that can be used to style components this way.)
* Move stylesheets from `frontend/themes/<mytheme>` to `src/main/resources/META-INF/resources`
* Move stylesheets from `frontend/themes/<mytheme>` to `src/main/resources/META-INF/resources` in a Spring project, or to `src/main/webapp`in a non-Spring project.
* Load custom styles through a master stylesheet with [classname]`@StyleSheet` instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s
* Load additional custom stylesheets through master stylesheet with `@import`

Expand Down