Aliases not working

[issam-seghir]

this is the config generated by the plugin but is not working, when i use these aliases

this is my vite config :

import AutoImport from "unplugin-auto-import/vite";
// import Icons from "unplugin-icons/vite";
import { defineConfig } from "vite";
import { ViteAliases } from "vite-aliases";
import dynamicImport from "vite-plugin-dynamic-import";

export default defineConfig(({ command, mode, ssrBuild }) => ({
	plugins: [
		dynamicImport(/* options */),
		AutoImport({
			/* options */
		}),
		ViteAliases(),
	],
}));

[Subwaytime]

Hm, it works fine for me..
It might be vite thats trying to handle the static assets differently, have you checked what happens if you import the file directly?

[issam-seghir]

I can confirm that the alias works in CSS, but not in HTML

.cards-carousel-arrow svg {
	fill: url("@assets/icons/gradiantpagination.svg#MyGradient") !important;
	// ✔ fill: url("src/assets/icons/gradiantpagination.svg#MyGradient") !important;
}

<img src="@assets/logo/logo.svg">
<!-- ❌ <img src="@assets/logo/logo.svg"> -->

could you explain what you mean by importing directly and provide an example?

this is my config :

plugins: [
		ViteAliases({
			dir: "src",
			prefix: "@",
			deep: true,
			depth: 1,
			/**
			 * Disables any terminal output
			 */
			silent: false,
		}),
	],

[Subwaytime]

It seems that vite's static asset loading is interfering here.
Importing directly like:

import img from '@assets/logo/logo.svg'

https://vitejs.dev/guide/assets.html#importing-asset-as-url

Note: It could be a bug in vite, as css url is handled the same way as img-tags.

Edit:
Generally i can also recommend importing assets with a helper function like the following
-> https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

[issam-seghir]

I understand your point, but I am using vanilla JavaScript in my project without any framework. I am not sure where to import the assets from ?
and It's possible that if I import all of my assets, the advantages of this plugin could be lost, although using aliases for shortcuts could save time, importing all of my assets would be a waste of time.

[Subwaytime]

Hm.

It seems to still be a vite issue, with some testing i found out that
@assets/logo/logo.svg does not work, but
@/@assets/logo/logo.svg does, as well as ~/@assets/logo/logo.svg.

Not entirely sure why this is the case, you might want to give this a try, otherwise i recommend moving the Images into the public folder for now!

I will investigate a bit more..

[issam-seghir]

do you know how to activate IDE autocomplete for aliases? When I type import "@...", the path autocomplete doesn't work.

[issam-seghir]

I found out how to do it. I activated this in the settings.

[Subwaytime]

Looks like this is based of rollup and vite. Nothing i can do here for the moment!