search

bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

Regular CSS imports handling (`@import url(../test.css);`) #104

Closed andreyvolokitin closed 5 years ago

andreyvolokitin commented 5 years ago

Does resolve-url-loader supposed to resolve regular CSS-imports? I have a setup where it successfully resolves background-image url(), but not touching @import url(), which fails later on the loader chain as unresolved

andreyvolokitin commented 5 years ago

My use-case: I have a component-based file structure, where SCSS-partials reside in their own directories and being imported into the index.scss. Also, I have regular CSS-imports in my SCSS-partials which are ignored by SCSS and later handled by css-loader. The problem is that url() inside regular CSS-imports needs to be rewritten along with any other url() in the SCSS-partials. But I guess that because resolve-url-loader relies on a source map to work (which is generated by sass-loader) — it probably can't handle CSS-imports because they are ignored by SCSS and thus are absent in generated source map...

bholloway commented 5 years ago

@andreyvolokitin I think you are correct in your reasoning. Webpack expects the assets to be relative to the file it is considering. With SCSS it only sees only sees the base file and not the imports within sass.

But in the case of the .css files, I would expect the css-loader to correctly handle the url(). If the paths in the .css are not relative then you can probably fix this with postcss or some other css processor. But this is a separate issue to your .scss files and will probably need a separate rule with different loaders.

andreyvolokitin commented 5 years ago

Yeah, I figured out I can use css-loader with resolve.alias in CSS-imports, thanks