Option to turn off url() inlining

[catdad]

Would it be possible to turn off url() inlining/importing? I have looked throughout and cannot find a config option to disable this.

In a project, I am only using url() for fonts (supporting legacy browsers) and do not want all 4 fonts inlined into the CSS file. I can't seem to find an option to allow that code to get through the loader untouched.

[sokra]

and do not want all 4 fonts inlined into the CSS file.

With the file-loader they won't be inlined. Have you tried this?

[catdad]

After some more research, I was able to work around this issue in a way other than the pull request I submitted. It's far less elegant though. I still feel that an "always inline everything" approach is not suitable for CSS and we could use some more control.

[jhnns]

What do you mean by inlining? Data-uris?

[catdad]

Yes, data-uris.

Basically, I am modularizing some legacy code. I can't afford to change much about the output structure (folder breakdown, types and locations of files, etc.), but I would still appreciate the benefits of writing modular code.

With CSS specifically, it has been difficult to get Webpack to just leave my code alone and let it just be CSS code. The most frustrating parts have been legacy fonts and device ppi-based alternative images, as the CSS loader will always attempt to embed them as data-uris. Using the file-loader for those files requires me to put the files in the modules folder instead, and then always ends up placing them in the wrong location as output.

It seems like there should just be an option such as "this is my final CSS code, don't mess with it".

[jhnns]

"this is my final CSS code, don't mess with it"

Well, that defeats the purpose of the css-loader. Then you could also use the raw-loader and pass it to style-loader.

But I'm not sure... usually the file-loader and the url-loader are interchangeable. It doesn't require re-ordering or anything. And it should definitely not end up in the wrong location.... maybe there is something wrong with your configuration?

[catdad]

I naively switched to the raw-loader, and am only now noticing that my CSS sourcemaps are broken. From what I can tell, the raw-loader doesn't support sourcemaps. So the css-loader still has the purpose of providing sourcemaps, even if it didn't parse anything else.

I'm almost positive there is something wrong with my configuration file, since there is very little documentation on advanced scenarios, and I have mostly been working with trial and error. It places extra files (those that are not the direct CSS output file) in the root output directory, even though I have my Webpack output files going into separate folders (one for js, another for css using the ExtraxtTextPlugin).

However, more on topic, the concern here is whether we can treat a CSS file as CSS and still not edit the CSS.

This could also be seen as a request for the raw-loader to support sourcemaps, but seeing as how it is supported by the same people, and a grant total of 5 lines of code, I think addressing this in a CSS module is more appropriate.

[jhnns]

The raw-loader can't support source maps because that would require knowledge about the language (and the raw-loader shouldn't know about CSS).

What about using the file-loader instead of the url-loader?

[catdad]

Yes, I mentioned that the raw-loader doesn't support sourcemaps already... or really anything that would be expected. My point there was that the css-loader provides more benefits than just embedding external resources (like sourcemaps, minification, etc.).

As I mentioned earlier, using the file-loader resulted in the static files being copied to the wrong location, so the CSS could no longer access them.

Anyway, respectfully, this whole process was taking way too long for me -- I have a product to ship -- so I went ahead and implemented a new loader that is able to provide the benefits of a dedicated CSS loader without changing the code. Thanks for your help and insights.

[sokra]

css-loader?-url

[micky2be]

I would also love to be able to turn it off.
I'm using custom urls in my css (parsed later by a custom library), but makes css-loader fails:

Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve \'file\' or \'directory\' ./ui://buttons/red.png

[catdad]

@micky2be This was implemented. Are you using the css loader as css-loader?-url? The -url part is what turns it off.

[micky2be]

I tried but didn't do anything, getting same errors
(using latest webpack and css-loader).