Kimmo20
(Kimmo Parsama)
December 9, 2019, 9:17am
1
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
Kimmo20
(Kimmo Parsama)
December 9, 2019, 11:51am
2
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");
Artur
(Artur Signell)
December 9, 2019, 12:29pm
3
Sound like you have the styles files inside src/main/webapp
whereas @CssImport
reads files from the frontend
folder in the project root
Kimmo20
(Kimmo Parsama)
December 9, 2019, 12:40pm
4
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…
Artur
(Artur Signell)
December 9, 2019, 12:49pm
5
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.
Kimmo20
(Kimmo Parsama)
December 9, 2019, 1:07pm
6
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.