'css-loader' can't resolve the relative path in production mode since 14.6.0

Description of the bug / feature

‘css-loader’ can’t resolve the relative path in production mode.

Minimal reproducible example

• My frontend folder looks like this:

-resources
  -frontend
    -css
        leaflet-map-styles.css
  -img
     map_layers_icon.png

• leaflet-map-styles.css

[class="leaflet-control-layers-toggle"] {
	background-image: url('img/map_layers_icon.png') !important;
	background-size: 26px 26px;
}

• GoogleMap.java

@CssImport(value = "./css/leaflet-map-styles.css", themeFor = "leaflet-map")
public class GoogleMap extends Div {...}

• addon: Leaflet4Vaadin

Expected behavior

No problem when running/building image

Actual behavior

ERROR in ../node_modules/@vaadin/flow-frontend/css/leaflet-map-styles.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'img/map_layers_icon.png' in 'D:\test\node_modules\@vaadin\flow-frontend\css'
    at D:\test\node_modules\enhanced-resolve\lib\Resolver.js:209:21
    at D:\test\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    
    ...
    
@ ../target/frontend/generated-flow-imports-fallback.js 33:0-71 34:89-96
@ ../target/frontend/generated-flow-imports.js?babel-target=es6

...

[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  18:38 min
[INFO] Finished at: 2021-05-18T13:23:50+08:00
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.vaadin:vaadin-maven-plugin:14.6.1:build-frontend (default) on project test: Webpack process exited with non-zero exit code.
[ERROR] Stderr: ''
[ERROR] -> [Help 1]
org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal com.vaadin:vaadin-maven-plugin:14.6.1:build-frontend (default) on project test: Webpack process exited with non-zero exit code.
Stderr: ''
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:215)
    
    ...    

Versions:

- Vaadin / Flow version: 14.6.1 (brokenness starts with 14.6.0)
- Java version: 11
- OS version: Windows 10

[caalador]

The fix will come in 14.6.2

Closing issue as the fix has been merged and it should roll out sometime soon.

Until release of 14.6.2 you can in the mean while add the raw-loader dependency to a java class with @NpmPackage(value = "raw-loader", version = "3.1.0") and then adding 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' }];
}

[vaadin-bot]

This ticket/PR has been released with platform 14.7.0.alpha3 and is also targeting the upcoming stable 14.7.0 version.