Custom CSS style for Vaadin 14 (no compatibility mode) - Spring boot

Flow
1

Hi,
I have tried to put the custom CSS file into a frontend folder in project root (same level as src/main/java).
I’m using a spring boot project

In addition I use

			<plugin>
				<groupId>com.vaadin</groupId>
				<artifactId>vaadin-maven-plugin</artifactId>
				<version>${vaadin.version}</version>
				<executions>
					<execution>
						<goals>
							<goal>prepare-frontend</goal>
						</goals>
					</execution>
				</executions>
			</plugin>

I try to load the CSS on my composite

@CssImport("./styles/toggle-button.css")
public class TaskComposer extends Composite<VerticalLayout> implements ItemListener {

The custom style just tries to colorize the toggle button of a Vaadin select component

<dom-module id="script-selection" theme-for="vaadin-select">
  <template>
    <style>
           
      [part="toggle-button"]
 {
      	color:red;
      }     
      
    </style>
  </template>
</dom-module>

But it does not work for me. When I use the compatibility mode and import the same style in the HTML file, then it works.
For reference:

@HtmlImport("frontend://styles/toggle-button.html")
public class TaskComposer extends Composite<VerticalLayout> implements ItemListener {

The toggle-button.html file is located at

src/main/resources/META-INF/resources/frontend/styles
2

Hi,

Without the compatibility mode, your frontend resources are located by default in the frontend folder in the root of the project.
Your old html code like this can be converted:

<dom-module id="script-selection" theme-for="vaadin-select">
  <template>
    <style>
           
      [part="toggle-button"]
 {
      	color:red;
      }     
      
    </style>
  </template>
</dom-module>

To a css file in the frontend folder styles/toggle-button.css:

      [part="toggle-button"]
 {
      	color:red;
      }

And you can import it @CssImport(value = "./styles/toggle-button.css", theme-for="vaadin-select")

You probably just forgot the theme-for.

3

@Jean-Christophe Gueriaud

Thank you so much - works nice