How to stop Vite/SASS from breaking SVG url() references

[adam-nielsen]

I have a project that pulls in SASS files, which reference SVG images.

The SVG images have code that uses clip-path, specifically <svg clip-path="url(#box)">.

However Vite fails to build this project, as the code comes out like this:

<svg clip-path="url("../../scss/_build/#box")">

The build fails because the inner double-quotes are not escaped, but the underlying problem is that this URL should not be converted to a relative link in the first place. The stacktrace shows the error originates within node_modules/sass/sass.dart.js however this is the failure with the double-quotes, so they must be generated before this point.

How can I tell Vite to configure the SASS process such that it leave these URLs alone?

[adam-nielsen]

I was able to come up with one workaround. It no longer produces the error but I don't think it's really a long term solution. I added this to vite.config.js:

css: {
  preprocessorOptions: {
    scss: {
      api: "legacy", // Avoid build failure on clip-path="url(#abc)"
    },
  },
},

[adam-nielsen]

Upon further investigation, it looks like some weirdness is happening with the way the SVG is being handled before Vite gets hold of it.

Ultimately it ends up as a data: URL, however for some reason the # is being URL-escaped into %23 before Vite does the SASS processing. Thus Vite is given a url like %23abc (instead of #abc) and so it doesn't realise it's meant to be a relative URL.

It looks like my problem is not with Vite, but rather trying to work out why the URL-escaping is happening so early in the process. Really it should happen last, just as the data: URL is being written, long after Vite has done its thing.