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).

[catdad]

I tested it when the fix was released, but I never ended up switching any of my builds to use it. I have been using my own lib, https://github.com/catdad/css-raw-loader, to import CSS without modifying it. Not sure if it would meet all of your requirements.

I do not see the -url handling in the source now, but I will check back on it when I have some time.

[micky2be]

Well, I guess I'm gonna use your loader then ;)

[chbrown]

Btw, to any newcomers, it appears this was fixed in [email protected]. I was on [email protected] and neither css-loader?-url nor css-loader?url=false disabled url loading, but npm update cleared that up.

[wizawu]

@chbrown Thanks for the info 👍
I was stuck at css?-url.

[alexmeq]

I can't get url disabling working with sourceMaps with css?sourceMap&url=false, though each option works individually. Is there a reason this can't work?

[neenhouse]

+1, having the same issue where when I turn on sourceMaps url disabling no longer works.

[navFooh]

Somehow, seeming related to this..
I also want css-loader to ignore my urls.

This seems to work, also with sourcemaps.

However with sourcemaps the files are not actually loading in the browser. It does display the path to right (unmodified & existing) url, but will not show. Only when I rewrite the URL to an absolute path to the same asset, it will load.

[cpatti97100]

css-loader 0.28.5

{
          loader: 'css-loader',
          options: {
            url: false
          }
        }

works!

[nmvuong92]

css-loader?-url

thanks