Invalid URL when css use background image about remix-webpack-demo

[pcattori]

@Jerry-Hong this is a known limitation of the current Remix CSS loader. It doesn't try to resolve import references in CSS.

To improve this, the code that handles imports in CSS from css-loader could be copied over into the Remix css loader implementation.

[Jerry-Hong]

webpack-contrib/css-loader#1493

[Jerry-Hong]

@Jerry-Hong this is a known limitation of the current Remix CSS loader. It doesn't try to resolve import references in CSS.

To improve this, the code that handles imports in CSS from css-loader could be copied over into the Remix css loader implementation.

Sorry I don't understand why it doesn't resolve import references in CSS.

[Jerry-Hong]

@Jerry-Hong this is a known limitation of the current Remix CSS loader. It doesn't try to resolve import references in CSS.
To improve this, the code that handles imports in CSS from css-loader could be copied over into the Remix css loader implementation.

Sorry I don't understand why it doesn't resolve import references in CSS.

I got it. Because this.importModule is running in Node.js environment and the url is called by new URL(url) in Node.js without protocol(http://, https://) will throw error(invalid URL).

The workaround is add protocol and host to publicPath. We can detect the publicPath in remix.config.js is without protocol, and then add the default protocol and host to it. I will create a PR for this issue. 👍

[ScriptedAlchemy]

You can turn off url construction on builds. JavaScript.url.relative or something like that.

[ScriptedAlchemy]

New url shouldn't be used in node envs. So you need to tell webpack not to attempt it