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!