CSS and assets

Runable distinguishes files transformed by Vite from files served as-is.

Load global styles

Declare them in runable.config.ts:

export default defineConfig({
  css: [
    "app/css/reset.css",
    "app/css/main.css",
  ],
});

Runable combines project and module styles, removes duplicates, and imports them into the client entry. Vite processes imports, URLs, and installed preprocessors.

You can also scan a directory:

export default defineConfig({
  css: [{ dirs: "app/css" }],
});

Keep styles local

Component-specific styles remain in the Vue file:

<style scoped>
.card {
  border: 1px solid #ddd;
}
</style>

Add only globally loaded stylesheets to css.

Serve a public file

Put untransformed files in public/:

public/
├── favicon.svg
└── images/logo.png

Reference them from the root:

<img src="/images/logo.png" alt="Acme" />

To import an asset and let Vite version it, keep it in source code:

<script setup lang="ts">
import logoUrl from "../assets/logo.svg";
</script>

<template><img :src="logoUrl" alt="Acme" /></template>

Change the public directory

export default defineConfig({
  publicDir: "static",
});

Use publicDir: false to disable it.