Я использую однофайловые компоненты Vue с 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 включает в себя несколько файлов SVG для таких вещей, как стрелки на <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
к сожалению, SVG не попадают в dist/
, когда я npm run build
(или npm run dev
и т. д.)
Как мне заставить эти изображения работать?
Путь на изображении выше правильный относительно меньшего количества источников; у меня складывается впечатление, что что-то должно автоматически изменить их при компиляции (похоже, уlessc нет соответствующих параметров?)
Я заметил это в выводе 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
Добавьте эти псевдонимы в свой 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'
}
}
});
надеялся на способ, который будет работать в целом (в основном, для того, чтобы люди в будущем гуглили это), но я возьму его :3