@StyleSheet on different pages

Flow
1

View #1


@Tag("Codex")
@Route(value = "codex", layout = MainLayout.class)
public class CodexView extends Component implements HasUrlParameter<String> {
//...

@StyleSheet("css/profile.css")
public class MainLayout extends Div implements RouterLayout {
//..

View #2


@StyleSheet("css/profile.css")
@Route(value = "roster/view1", layout = MainLayout1.class)
@Tag("rosterview1")
public class RosterView1 extends Component implements HasUrlParameter<Integer> {
//...

@StyleSheet("css/profile1.css")
public class MainLayout1 extends Div implements RouterLayout {
//...

The problem that view #2 can’t load css file. By some reasons view is trying to load css from “frontend” location.
What is the difference in the code?
Where is configuration for resource locations?

Update:

Headers for view #1

Request URL: http://localhost:8080/css/profile.css
Request method: GET
Remote address: 127.0.0.1:8080
Status code: 200  




GET /css/profile.css HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Accept: text/css,*/*;q=0.1
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/codex/xxx
Cookie: Idea-4f77165c=30bbfd25-0533-4fae-8ca3-988d41a84ed3; Idea-b758433b=e51de776-33e1-40b9-8e24-4ebf6de728fb; Idea-e4082b21=e51de776-33e1-40b9-8e24-4ebf6de728fb; JSESSIONID=69FFABD30F9FB725CC29EF5214B29332
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache




HTTP/1.1 200 
Cache-Control: no-cache
Last-Modified: Thu, 07 Nov 2019 16:53:56 GMT
Content-Type: text/css
Content-Length: 2276
Date: Fri, 08 Nov 2019 15:03:32 GMT

Headers for view #2

Request URL: http://localhost:8080/frontend/css/profile.css
Request method: GET
Remote address: 127.0.0.1:8080
Status code: 404 


request headers

GET /frontend/css/profile.css HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Accept: text/css,*/*;q=0.1
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/roster/view1/1597807688
Cookie: Idea-4f77165c=30bbfd25-0533-4fae-8ca3-988d41a84ed3; Idea-b758433b=e51de776-33e1-40b9-8e24-4ebf6de728fb; Idea-e4082b21=e51de776-33e1-40b9-8e24-4ebf6de728fb; JSESSIONID=69FFABD30F9FB725CC29EF5214B29332
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache


response headers

HTTP/1.1 404 
Cache-Control: no-cache, no-store
Pragma: no-cache
Expires: Thu, 01 Jan 1970 00:00:00 GMT
Content-Type: text/html;charset=utf-8
Transfer-Encoding: chunked
Date: Fri, 08 Nov 2019 14:57:50 GMT

Why in the second case i have “/frontend”?

Vaadin 14.0.1

2

According to the V14 docs, cssimport is relative to the servlet. Since the second example has a different route and not at the root, this may be what is causing the problem.

Try to add ./ to the css import which should make it specific.

https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html