CODEWITHSUNDEEP
javaspring-bootvaadin
smalburg
smalburg

Reputation: 17

Vaadin cannot import CSS file

So I'm new to Vaadin and all that stuff and I'm currently trying to integrate a CSS-File to my site. When I try to do this though, I get an error after trying to run the gradle-Project:

java.lang.IllegalStateException: 

  Failed to find the following css files in the `node_modules` or `C:\Users\Sebastian Malburg\Documents\Schule_4\SYT\Wind-2\windpark_REST_JSON\.\frontend` directory tree:
      - ./frontend/table_style.css

So obviously the Path to the CSS-File is wrong, but I don't know where to "start" the path. Somewhere on the internet I've read that it starts in the project's root folder (where my build.gradle-File is located), but it doesn't seem to work.
Here's my class where the Annotation is used:

package windpark.windengine;

import java.awt.*;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.provider.ListDataProvider;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.router.Route;
import windpark.model.WindengineData;

@CssImport("./frontend/table_style.css")
@Route("windengine/tables")
public class GridView extends VerticalLayout {

    final Grid<WindengineData> grid;
    private WindengineService service;

    public GridView() {
        ...
   }

}

And here is my Project Structure: Project Structure

Edit:
I've already tried ./table_style. I think the proplem may lie in the Path: C:\Users\Sebastian Malburg\Documents\Schule_4\SYT\Wind-2\windpark_REST_JSON\.\frontend which is automatically used by Vaadin in think. I guess \.\ is invalid? How would I change this path?

Upvotes: 0

Views: 1787

Answers (2)

Tarek Oraby
Tarek Oraby

Reputation: 1219

Your CSS file is placed in the wrong directory. You have it under target/frontend. It should be instead placed under /frontend which exists directly inside your project's directory.

Once placed there, you should use @CssImport("./table_style.css") as Shubham noted.

Upvotes: 1

Shubham Pathak
Shubham Pathak

Reputation: 155

Use only file name of css, since your css in frontend folder
@CssImport("./table_style.css")

Upvotes: 0

Related Questions