StyleSheet is not finding files in jar file

Flow
1

Hi,
I have some css files directory src/main/resources/META-INF/resources/frontend/styles. Im using StyleShyyt to import them into project. When im running my app in Eclipse then everything is working fine, but when i build jar and run it, then it cant find my css files. Changing annotation to CssImport with this same value is working for jar file but then it isn’t loading my background images. What can i do wrong, if everything working fine with running app from eclipse but not working from jar file? I`m using Vaadin 14 with Spring Boot.

@StyleSheet(value=“frontend://styles/loginPanel/general.css”) ← working from eclipse loading background images not working from jar

@CssImport(value=“frontend://styles/loginPanel/general.css”) ← working from eclipse and jar but isnt loading background images

general.css

.background { 
		background-image:url("../images/watermark-white.png"), url("../images/spring1.jpg");
		background-position: right bottom, left top;
  		background-repeat: no-repeat, no-repeat;		
		background-size:,cover;

}

.card{
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translateX(-50%) translateY(-50%);
	color: white;
		width: 320px;
		height: 210px;
		border: 1px solid rgba(255, 255, 255, 0.41);
		border-radius: 10px;
		background: -moz-linear-gradient(top, rgba(0,36,32,0.4) 0%, rgba(35,15,2,0.4) 100%);
		background: -webkit-linear-gradient(top, rgba(0,36,32,0.4) 0%,rgba(35,15,2,0.4) 100%);
		background: linear-gradient(to bottom, rgba(0,36,32,0.4) 0%,rgba(35,15,2,0.4) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66002420', endColorstr='#66230f02',GradientType=0 );
		box-shadow: 0px 0px 9px rgb(0,0,0);
}
2

Does it help if you change ../images/watermark-white.png to images/watermark-white.png?

3

It didnt help, this path is working fine for StyleSheet annotation when i`m running from Eclipse

4

Sorry, my path was incorrect, it should be relative to resources, so frontend/styles/images/watermark-white.png if that’s where the image is.

And it shouldn’t matter at this point, but with @CssImport the preferred syntax is @CssImport("./styles/loginPanel/general.css").

5

css is loading by CssImport it apply all settings for view except images

6

I tried out a couple similar examples and it works fine for me.

Can you access the picture in the browser?

Try http://localhost:8080/frontend/styles/images/spring1.jpg, or whatever the path to your image is relative to the second resources directory.

7

Yes, i got message by typing http://localhost:4140/WebServ/frontend/styles/images/spring1.jpg there is WebServ in link couse it is default context, when i added background-color: black to .background in css then place where should be my img changed color so everything is loading well except images

8

What kind of project is it? Spring or something else?

9

Yes, it is Spring Project it is starting with Spring Boot and dependecies are obtained by Maven

10

I tried reproducing with the following steps

  1. Go to vaadin.com/start and download the latest Spring Boot starter
  2. Import the project into IDE of choice (IntelliJ in my case)
  3. Put an image called sample.jpg into src/main/resources/META-INF/resources/.
  4. In frontend/styles/shared-styles.css in the root directory, I created the following rule:
body {
	background-image: url("sample.jpg");
}

The shared-styles.css is imported in the MainView with @CssImport("./styles/shared-styles.css")

  1. Run the project with mvn spring-boot:run and open it at http://localhost:8080/

Result: The image shows up

I then tried running from the Application.java main method instead, the image still shows up.

I then changed the import path to @CssImport("frontend://styles/shared-styles.css"), the image still shows up. This type of path is not recommended, and may be unsupported in future versions.

I then created a stylesheet in src/main/resources/META-INF/resources/frontend/styles instead, called style.css. I removed the background image rule from shared-styles.css and put it in style.css, and imported it with @CssImport("./styles/style.css"). The image still shows up.

I then moved the image into the src/main/resources/META-INF/resources/frontend/ directory, and changed the import in the CSS file to url("frontend/sample.jpg"). The image still shows up.

I then changed the path to be relative, url("../sample.jpg"). This no longer works.

So as long as your path is not relative to the CSS file, but relate to src/main/resources/META-INF/resources/, then it should work.

11

Changing path worked for eclipse run, i needed to write full path after META-INF/resources folder in css, now images are loading correctly. My path in css:
background-image:url(“./frontend/styles/images/watermark-white.png”), url(“./frontend/styles/images/spring1.jpg”);

but running it from jar, they still dont show up

12

For me it shows up when running the jar also, how are you running it?

13

when im in target folder i write command java -jar WebServ-2.0-SNAPSHOT.jar

14

I run it the same way, and I set the same context path through application.properties, is still works for me. Have you rebuilt the jar since updating your project?

15

i deleted folder target and built new jar and it dont show up. For this tutorial project it works correctly.

16

Would you be able to share the project where it doesn’t work?

17

Ok i think everything is working now. It seems that it wasnt working correctly becouse of Servlet class bt i dont know why. When i deleted it then my jar started working.

18

Okay, hard to say what’s wrong with the servlet class without seeing it, but great that you got it working!

19

That was my servlet: ```

@WebServlet(urlPatterns = “/*”, name = “WebAppServlet”, asyncSupported = true)

public class WebAppUIServlet extends VaadinServlet implements SessionInitListener, SessionDestroyListener{

private ApplicationContext context;

private static final long serialVersionUID = 1L;

private Logger log = Logger.getLogger(WebAppUIServlet.class.getName());


@Override
protected VaadinServletService createServletService(
        DeploymentConfiguration deploymentConfiguration)
        throws ServiceException {
    VaadinServletService service = new VaadinServletService(
        this, deploymentConfiguration){
			private static final long serialVersionUID = 1L;
			 @Override
			    public void requestEnd(VaadinRequest request, VaadinResponse response, VaadinSession session) {
				 	if (AppHandler.isTestMode() && session != null) {
			            assert VaadinSession.getCurrent() == session;
			            session.lock();
			            }*/
			            session.unlock();
			        }
			        super.requestEnd(request, response, session);
			    }
    };
    service.init();
    return service;
}

@Override
protected void servletInitialized() throws ServletException {
    super.servletInitialized();
    getService().addSessionInitListener(this);
    getService().addSessionDestroyListener(this);
}



@Override
public void sessionInit(SessionInitEvent event) throws ServiceException {
	log.debug("INIT SESSION");

}
@Override
public void sessionDestroy(SessionDestroyEvent event) {
	log.debug("Destroy session");
}

}


and connection to it from Application.java:

  @Bean
  public ServletRegistrationBean<WebAppUIServlet> servletBean() {
    ServletRegistrationBean<WebAppUIServlet> bean = new ServletRegistrationBean<>(
        new WebAppUIServlet(), "/*");
    return bean;
  }