ModuleNotFoundError with css external assets. How to handle css assets?

[aruntk]

ModuleNotFoundError with css external assets. How to handle css assets?

[aruntk]

@equinusocio try using assets/ instead of /assets/. Latter one refers to assets folder inside your root folder. As the error suggests webpack could not resolve the absolute path /assets/images/thread-row-placeholder.svg.

Or use absolute path to svg file. /path/to/assets/.

:host {
  display: flex;
  contain: content;
  position: relative;
  overflow: hidden;
  background-image: url("assets/images/thread-row-placeholder.svg");
}

Refer the example here https://github.com/aruntk/polymer-webpack-demo/blob/master/src/components/example-app.html#L25

Dont forget to define image loaders in your webpack config. eg https://github.com/aruntk/polymer-webpack-demo/blob/master/webpack.config.js#L22-L28

[equinusocio]

I'm already using file-loader and i get this error anyway. My assets folder live inside the root.

Does the wc-loader follow the css url's starting from the css file?

[aruntk]

@equinusocio Reopening the issue. I've identified the cause. Working on it.

[aruntk]

Fixed in commit 9bb2b83.

Solution

1. Update to v1.1.10

2. Change webpack config according to https://github.com/aruntk/wc-loader#root-relative-urls

Update

I've released 1.1.11 with dependencies updated. So you might want to try that one instead of 1.1.10

[equinusocio]

@aruntk I tried 1.1.12 (with file-loader) and i get the same error:

with root=/ and css url /assets/images/thread-row-placeholder.svg
it search for — //assets/images/thread-row-placeholder.svg — and return the Module not found error

---

with root=/ and css url assets/images/thread-row-placeholder.svg
it search for — ./assets/images/thread-row-placeholder.svg — and return the Module not found error

I'm missing something?

---

EDIT

It works if i set root=/ and the css url to ../../../assets/images/thread-row-placeholder.svg.

EDIT 2

I solved by removing root=/ and set useRelativePath: false to file-loader. This is the only way found to get it works. @aruntk Maybe you should write a bit of documentation.

[aruntk]

@equinusocio absolute path is working in 1.1.12. See the following screenshots.

see the background image.

Could you check the access permissions of assets folder?

[aruntk]

@equinusocio It seems to be working fine in my system even without setting useRelativePath: false.

This is my webpack config https://github.com/aruntk/polymer-webpack-demo/blob/master/webpack.config.js#L43

I'll try to add better documentation. Thanks for the suggestion :)