Issue loading css

Hey,

so I’m trying to load css with @Stylesheet/@CssImport and UI.getCurrent().getPage().addStyleSheet(…);.
Problem is that the browser tries to fetch the css file from address “http://localhost:8080/frontend-es6/custom.css” instead of “http://localhost:8080/frontend/custom.css” where it is actually located.
My import attempts.

@StyleSheet("./custom.css")
@CssImport("./custom.css")
UI.getCurrent().getPage().addStyleSheet("./custom.css");

and custom.css is located in project/frontend/ folder as instructed by https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html

ps. its Vaadin 14 Spring project that was migrated from on Vaadin 10 storefront/dashboard project

To answer my own question and some:
@CssImport seems to do nothing in my project but these two work and solve my problem.

@StyleSheet("context://opensans/opensans.css")
UI.getCurrent().getPage().addStyleSheet("context://customcss.css");

Sound like you have the styles files inside src/main/webapp whereas @CssImport reads files from the frontend folder in the project root

Artur Signell:
Sound like you have the styles files inside src/main/webapp whereas @CssImport reads files from the frontend folder in the project root

and custom.css is located in project/frontend/ folder as instructed by https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html

no, its in frontend folder in project root

Also it looks like none of this works when the project is packaged into .war. I’ll have to investigate this further…

The other thing is that frontend-es6 indicates that you are using compatibility mode (Bower). In that case, the frontend folder in the project root is not actually used at all.

Artur Signell:
The other thing is that frontend-es6 indicates that you are using compatibility mode (Bower). In that case, the frontend folder in the project root is not actually used at all.

How do I turn that off? I tested it before migration and it didn’t work back then.
root\src\main\resources\static\ folder seems to work the best for me. Everything in there is visible in http://localhost:8080/*, even after packaging.