title: How can vite be configured to load relative images in stylesheets imported from node_modules?
body: <p>I have an application that uses UIkit, Less for local styling, and Vite for frontend tooling (bundling and whatnot).  I'm not sure that this is relevant, but this is a Vue 2/Webpack application that I'm upgrading to Vue 3/Vite.</p>
  <p>Per <a href="https://getuikit.com/docs/less" rel="nofollow noreferrer">UIkit's Less documentation</a>, we import UIkit's <code>uikit.theme.less</code> file in our project's base less file.  UIkit's stylesheets have some relative paths to SVG files that get run through less's <a href="https://lesscss.org/functions/#misc-functions-data-uri" rel="nofollow noreferrer"><code>data-uri</code> function</a> (examples below).  That worked fine with Webpack, but with Vite it's not quite working.  As I understand it, for small files, <code>data-uri</code> will UTF-8 encode the asset and essentially inline it--at least that's what we got in our Webpack bundles.  But with our Vite build, it seems these relative image paths aren't being resolved, <code>data-uri</code> hence falls back to a <code>url()</code>, and we get 404s for the images.</p>
  <p>For example, in UIkit's code the <em>relative</em> path to a spinner image is defined <a href="https://github.com/uikit/uikit/blob/v3.12.2/src/less/components/form.less#L110" rel="nofollow noreferrer">here</a>; it's used in a <code>select.uk-select</code>.  And <a href="https://github.com/uikit/uikit/blob/v3.12.2/src/less/components/form.less#L436" rel="nofollow noreferrer">here</a> that path is passed to a <code>.svg-fill</code> mixin (<a href="https://github.com/uikit/uikit/blob/v3.12.2/src/less/components/mixin.less#L11" rel="nofollow noreferrer">here</a>).  When we bundle the code using Vite, or run a local dev server, the result is:</p>
  <pre><code>background-image: url(../../images/backgrounds/form-select.svg);
  </code></pre>
  <p>That, of course, doesn't load because the &quot;images&quot; directory is relative to the <code>form.less</code> file.  In Webpack, the output was as expected:</p>
  <pre><code>background-image: url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23001c30' d='M12 1 9 6h6zM12 13 9 8h6z'/%3E%3C/svg%3E&quot;);
  </code></pre>
  <p>For this type of question, I would normally include an HTML/CSS/JS snippet; however, I don't think SO supports Vite.  As such, I'm including a small Stackblitz that minimally demonstrates the issue: <a href="https://stackblitz.com/edit/vite-esqmqc?file=main.js" rel="nofollow noreferrer">https://stackblitz.com/edit/vite-esqmqc?file=main.js</a>  Please see <code>main.js</code>, <code>style.less</code>, and note that there's a 404 error in the console complaining about the aforementioned <code>form-select.svg</code> file.</p>
  <p>In case the question isn't clear, how can I get Vite to resolve images which are relative to a dependency in <code>node_modules</code>?</p>
  <p>Thanks in advance.</p>