@vettvangur/vite

Vite dev/build wrapper for Vettvangur projects. Wires up HTTPS (auto-mkcert when no cert provided), Sass via esbuild-sass-plugin + LightningCSS, optional Tailwind v4, asset copying, and a Razor .cshtml watcher that triggers full reloads.

Install

pnpm add -D @vettvangur/vite

The Sass and Tailwind toolchains (sass, lightningcss, esbuild-sass-plugin, tailwindcss, @tailwindcss/postcss, postcss) are declared as optionalDependencies of @vettvangur/vite, so pnpm installs them automatically — you do not need to add them again in your app.

If you want to pin a specific Tailwind or Sass version in your project, install just that one:

pnpm add -D tailwindcss      # only when using styles.type: 'tailwind'
pnpm add -D sass              # only when using styles.type: 'sass'

CLI

vettvangur-vite dev      # start the HTTPS Vite dev server
vettvangur-vite build    # production build of CSS/JS into config.dest
vettvangur-vite copy     # copy static assets from config.assets → config.dest/assets

Configuration

The CLI reads vettvangur.config.mjs from the project root (or the cwd passed via the CLI):

// vettvangur.config.mjs
export default {
  dest: './wwwroot/dist',
  public: './wwwroot',
  assets: './wwwroot/assets',
  views: '../Vettvangur.Site/Views',
  base: '/dist/',

  scripts: {
    path: './src/scripts',
    entries: ['./src/scripts/main.ts'],
  },
  styles: {
    type: 'sass',          // 'sass' | 'tailwind'
    path: './src/styles',
    entries: ['./src/styles/main.scss'],
  },
}

| Key | Required | Purpose | | --- | --- | --- | | dest | yes | Output directory. | | public | yes | Public root (favicons, robots.txt, etc.). | | assets | yes | Source for vettvangur-vite copy. | | views | yes | Razor views directory — watched for .cshtml changes. | | base | no | Public base path. Defaults to inferred-from-paths or /. | | scripts.path / scripts.entries | yes | Script source dir + entry file list. | | styles.type | yes | 'sass' or 'tailwind'. | | styles.path / styles.entries | yes | Style source dir + entry file list. |

Dev server

• HTTPS by default. If httpsCfg is set in your config, those certs are used; otherwise vite-plugin-mkcert generates a local cert on first run.
• CORS is restricted. The dev server only accepts cross-origin requests from localhost / 127.0.0.1 (any port). No * wildcards.
• Razor reloads. .cshtml changes under config.views trigger a full browser reload.

Sass / Tailwind

• Sass entries are compiled with esbuild-sass-plugin and post-processed through LightningCSS (minify, autoprefix, transpile).
• Tailwind entries are processed by @tailwindcss/postcss with file-system watching of Razor views and any extra watchContent paths.
• A debounced rebuild loop coalesces bursty file changes; rebuilds are awaited so a second change during a build is queued (no race).

tsconfig

Re-export the package's base TS config from your project:

{
  "extends": "@vettvangur/vite/tsconfig"
}

Bundle output

The package ships as ESM CLIs in dist/cli/ plus library entry points (load-config, sass, tailwind). Built with Rollup + esbuild.