Why aliases doesn't work for html?

[TalantRys]

I'm trying to set up aliases and try to use them inside html, but they don't seem to work for html files by default. When trying to use an alias in js or scss, the path in the browser changes (although it doesn't always happen), but an error appears in html with the path unchanged localhost/@/scripts/about.js .

Example in src/pages/about.html

    <h2>Body of About</h2>
    <script type="module" src="@/scripts/about.js"></script>

Another example with an error in src/js/main.js

import 'the-new-css-reset/css/reset.css';
import '@/styles/style.css';

document.querySelector('#app').innerHTML = '<h1>11</h1>';

---

What is used:

• Vituum and PostHTML (also i tried Nunjucks)
• Vanilla html and js, Scss

My folder structure:

Details

My vite.config.js

import { resolve } from 'path';
import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint';
import vituum from 'vituum';
import posthtml from '@vituum/vite-plugin-posthtml';


export default defineConfig({
  publicDir: 'public',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src/'),
      '@scss': resolve(__dirname, 'src/styles'),
    },
  },
  plugins: [
    vituum(),
    posthtml({
      root: './src'
    }),
    eslint({
      cache: false,
      fix: true,
    }),
  ],
  build: {
    minify: 'esbuild',
    manifest: true,
  },
});