Open Jerry-Hong opened 1 year ago
@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 import
s in CSS from css-loader could be copied over into the Remix css loader implementation.
@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
import
s 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 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 handlesimport
s 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. 👍
You can turn off url construction on builds. JavaScript.url.relative or something like that.
New url shouldn't be used in node envs. So you need to tell webpack not to attempt it
Operating System: Macos 13.0 Node Version: v16.17.1 NPM Version: 8.19.2 webpack Version: 5.75.0 css-loader Version: 6.7.3
Bug report
css-loader cannot load css correctly when css use background-image in webpack5(use asset/resource)
Actual Behavior
Expected Behavior
Javascript can import css that contain background-image and url will be transform to public path.
How Do We Reproduce?
https://github.com/Jerry-Hong/webpack5-css-loader-image-issue
Please paste the results of
npx webpack-cli info
here, and mention other relevant informationSystem: OS: macOS 13.0 CPU: (8) arm64 Apple M2 Memory: 44.70 MB / 16.00 GB Binaries: Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v16.17.1/bin/npm Browsers: Brave Browser: 106.1.44.105 Safari: 16.1 Packages: css-loader: ^6.7.3 => 6.7.3 esbuild-loader: ^2.20.0 => 2.20.0 webpack: ^5.75.0 => 5.75.0 webpack-cli: ^5.0.1 => 5.0.1