Connect custom .css to project

Flow
1

Hello friends.
Now I need personal .css in my project, but as I see my styles.css can’t be downloaded.
I have frontend package only with “generated” package and “index.html” inside, there is no ‘themes’ package there. As I undestand I use default theme.
Now I already created “themes” → “custom” packages, and 2 files in “custom”: styles.css and theme.json.

Screenshot_5
Screenshot_51426×407 44.6 KB

But as I see on project and in Network by browser Development Mode, no .css downloaded.
Please, help.
What do I do wrong?
My Vaadin version 24.7.0, Java 21 + Spring Boot 3.4.4

2

Have you annotated your AppShellConfigurator with @Theme("custom") ?

@Theme(value = "custom")
// other annotations ...
public class Application implements AppShellConfigurator {
// ...
3

When I try it to my main class every time I get exception

image
image1848×960 125 KB

4

You could try to extract AppShell into a separate class. I’ve seen this hiccup in the past when it’s on the Application.java

Or you are using some preview java features and haven’t configured Gradle correctly.

5

May be you can advice simething for Gradle?

plugins {
id ‘java’
id ‘org.springframework.boot’ version ‘3.4.4’
id ‘io.spring.dependency-management’ version ‘1.1.7’
id ‘com.vaadin’ version ‘24.7.0’
}

group = ‘com.money’
version = ‘1.0.15’

java {
toolchain {
languageVersion = JavaLanguageVersion.of(21)
}
}

// for prod
vaadin {
productionMode = true
}
tasks.named(‘build’) {
dependsOn(‘vaadinBuildFrontend’)
}

configurations {
compileOnly {
extendsFrom annotationProcessor
}
}

repositories {
mavenCentral()
}

ext {
set(‘springModulithVersion’, “1.3.3”)
set(‘vaadinVersion’, “24.7.0”)
}

dependencies {
implementation ‘org.springframework.boot:spring-boot-starter-data-jpa’
implementation ‘org.springframework.boot:spring-boot-starter-security’
implementation ‘com.vaadin:vaadin-spring-boot-starter’
implementation ‘org.springframework.modulith:spring-modulith-starter-core’
implementation ‘org.springframework.modulith:spring-modulith-starter-jpa’
implementation(“org.parttio:line-awesome:2.1.0”)
compileOnly ‘org.projectlombok:lombok’
developmentOnly ‘org.springframework.boot:spring-boot-devtools’
developmentOnly ‘org.springframework.boot:spring-boot-docker-compose’
runtimeOnly ‘org.postgresql:postgresql’
runtimeOnly(“org.flywaydb:flyway-database-postgresql:11.5.0”)
annotationProcessor ‘org.projectlombok:lombok’
testImplementation ‘org.springframework.boot:spring-boot-starter-test’
testImplementation ‘org.springframework.modulith:spring-modulith-starter-test’
testImplementation ‘org.springframework.security:spring-security-test’
testRuntimeOnly ‘org.junit.platform:junit-platform-launcher’
}

dependencyManagement {
imports {
mavenBom “org.springframework.modulith:spring-modulith-bom:${springModulithVersion}”
mavenBom “com.vaadin:vaadin-bom:${vaadinVersion}”
}
}

tasks.named(‘test’) {
useJUnitPlatform()
}

test {
enabled = false
}

6

I have never used Gradle. I only remember this issue Vaadin throws runtime exception for Java 21 preview features · Issue #18271 · vaadin/flow · GitHub

7

This error can happen also when classes are compiled with, for example, java 21 but the application is started with one older version, e.g 17

8

Try to run gradle with debug info to get more information. I don’t remember the flag, perhaps --debug

9

Guys, thanks for your attempts to help.
I downgraded Java to version 17, good thing it didn’t take much time.

Also I created “default” package in “frontend”, and put there 2 files, styles.css and theme.json.
You will see current structure on screenshot.
My project now succesfully started, thank you so much, but no .css file downloaded just like before:(
Any more ideas?

Screenshot_6
Screenshot_61846×464 78.4 KB

10

That structure looks weird… what are you trying to archive?

The simplest example is here:
Theme skeleton-starter-flow/src/main/frontend/themes/my-theme at v24 · vaadin/skeleton-starter-flow · GitHub
Java annotation skeleton-starter-flow/src/main/java/org/vaadin/example/AppShell.java at v24 · vaadin/skeleton-starter-flow · GitHub

That’s all you need. Keep in mind that your current style css is also not really helpful for testing :host is not a good selector in that regard

11

I just want to download my .css in project. Unfortunately it doesn’t work either, as well as on Github.
I check in Development mode, no .css in Network.
Now I can download local .css for pade only by @StyleSheet(“./lazy-loaded.css”).

12

All css within frontend/theme is bundled together so there might be no additional network request (especially in development mode) - if your css isn’t applied, you are doing something wrong.

What is your use-case? Accessing your css externally? In that case using Spring’s public folder might help so that the resources below a specific path are accessible natively

1 Like
13

Ohh… my good. Christian your are right. The correct styles have been applied and no .css in Network! Thank you so much.

May be you can help with another one moment, I need custom style for cell in vaadin grid, but only in one column, but can’t find it.
May be you can advice what complex code I should make for .css and java.
My column:
grid.addColumn(createToggleDetailsRenderer(grid))
.setWidth(“40px”)
.setFlexGrow(0)
.setFrozen(true);
and as i see in " Stylable Parts of Components" I should use vaadin-grid::part(cell) or vaadin-grid-cell-content How to style the Grid component | Vaadin components, but styles are applied either to all table or one column (but this column doesn’t render content) or not applied to anything at all.

14

You are on the right track… you need to scroll to " Dynamically Styling Rows & Columns" this should be your use-case

15

Thank you Christian!
Guys, you save me, thank you so much.

1 Like