URL in CSS no longer works in Vaadin 14.6

user_209641 0
Viewed 435

After upgrading from Vaadin 14.5 to 14.6 I'm facing problems with CSS that contains URL's that point to content.

For example, the following CSS no longer works:

:host([part="my-part"]) [part="reveal-button"]::before {
    content: url("../images/my-image.svg");
}

It fails to "compile" when running the build-frontend goal of the Vaadin Maven plugin with the following error:

ERROR in ../node_modules/@vaadin/flow-frontend/styles/components/my-component.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\@vaadin\flow-frontend\styles\components'

The same error appears in the browser if I try to run the project. This CSS has worked fine in all previous versions of Vaadin 14.

Has anyone encountered anything similar, or have any ideas as to what has changed that might cause this?

vaadin14 vaadin-flow
2 Answers

With the new custom theme feature the .css loader has changed from raw-loader to css-loader but it shouldn't touch urls outside of frontend/themes/[theme-name] or node_modules

Is the styles/components/my-component.css located in src/main/resources/META-INF/frontend, src/main/resources/META-INF/resources/frontend or src/main/resources/META-INF/resources to be packaged as an add-on jar or compatibility mode?

As in that case the css would end up inside node_modules which might make a difference to the resolving.

As a workaround if you are not building an add-on you should be able to move the css and image to {project_root}/frontend and it should build fine.

Until release of 14.6.2 you can add the raw-loader dependency to a java class with @NpmPackage(value = "raw-loader", version = "3.1.0") and then add to webpack.config.js the lines

if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
  flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
  flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}
user_135234830

Did you change the css structure to follow the new theme structure introduced in 14.6? It is not needed, but it is important context. I think it is at least related to your issue.

The path seems a little weird in your error messages, ending up in a node_modules folder. Could you share where this file is in, and what loads the file to your project?

With the new theme structure, I've used the following css to import images in css:

  background: url('./images/fire.png');

And that was placed in a file: frontend/themes/mythemename/mythemefile.css

Jens_Jansson_640950
Related