Vue - get UiKit images in Vite build

Question

i'm using Vue Single-file-components with UiKit.

main.js

import App from './App.vue'
import "../node_modules/uikit/src/less/uikit.theme.less";

const app = createApp(App)
const globals = reactive({})
app.mount('#app')

uikit includes a few SVG files for things like the arrows on <select>:

/path/to/project/node_modules/uikit/src/images/backgrounds
├── accordion-close.svg
├── accordion-open.svg
├── divider-icon.svg
├── form-checkbox-indeterminate.svg
├── form-checkbox.svg
├── form-datalist.svg
├── form-radio.svg
├── form-select.svg
└── list-bullet.svg

unfortunately, the SVGs don't end up in dist/ when i npm run build (or npm run dev, etc.)

How do i get those images working?

The path in the image above is correct relative to the less sources; i get the impression that something is supposed to automagically change them on compile (lessc doesn't seem to have any relevant options?)

---

Edit

I noticed this in the output of vue build:

$ npm run build

> [email protected] build
> vite build

vite v4.0.4 building for production...
transforming (106) node_modules/yaml/browser/dist/compose/util-contains-newline.js
../../images/backgrounds/divider-icon.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime

../../images/backgrounds/list-bullet.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime

../../images/backgrounds/form-select.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime

../../images/backgrounds/form-datalist.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime

../../images/backgrounds/form-radio.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime

../../images/backgrounds/form-checkbox.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime

../../images/backgrounds/form-checkbox-indeterminate.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime

../../images/backgrounds/accordion-close.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime

../../images/backgrounds/accordion-open.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ 116 modules transformed.
dist/index.html                   0.76 kB
dist/assets/index-9a8004d3.css  113.23 kB │ gzip: 19.09 kB
dist/assets/index-08c469df.js   206.39 kB │ gzip: 70.56 kB

Answer 1

Add these aliases to your vite.config.js

export default defineConfig({
  resolve: {
    alias: {
      '../../images/backgrounds': 'uikit/src/images/backgrounds',
      '../../images/components': 'uikit/src/images/components',
      '../../images/icons': 'uikit/src/images/icons'
    }
  }
});