LessJS is configured through the Vite plugin. Keep configuration explicit: routes, islands, static output, head injection, PWA and middleware are separate concerns.
// vite.config.ts
import { defineConfig } from 'vite';
import { less } from '@lessjs/core';
export default defineConfig({
plugins: [less()],
});| Option | Default | Purpose |
|---|---|---|
| routesDir | 'app/routes' | Page routes, API routes, renderers and route-tree middleware. |
| islandsDir | 'app/islands' | Local client-upgraded Custom Elements. |
| componentsDir | 'app/components' | Shared server-rendered components. |
| packageIslands | [] | Packages that export an islands metadata array. |
| build.outDir | 'dist' | Static output directory. |
less({
html: {
lang: 'en',
title: 'My LessJS App',
},
});Use inject for external stylesheets, module scripts and small head fragments. URLs are validated before being added to the generated document.
less({
inject: {
stylesheets: [
'https://cdn.example.com/theme.css',
],
scripts: [
'https://cdn.example.com/widget.js',
],
headFragments: [
'<meta name="theme-color" content="#050505">',
],
},
});Package islands are reusable Web Components discovered at build time. This is how @lessjs/ui contributes interactive components to the docs site.
less({
packageIslands: ['@lessjs/ui'],
});The framework option declares the default upgrade strategy. Current implementation still needs hardening so this metadata consistently reaches the client build.
less({
island: {
upgradeStrategy: 'idle',
},
});less({
middleware: {
logger: true,
requestId: true,
cors: true,
corsOrigin: 'https://example.com',
securityHeaders: true,
csp: {
policy: "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'",
nonce: false,
reportOnly: false,
},
},
});PWA support generates manifest and service worker assets during SSG. Treat it as an enhancement, not as a replacement for static HTML correctness.
less({
pwa: {
name: 'My LessJS App',
shortName: 'LessJS',
themeColor: '#050505',
backgroundColor: '#ffffff',
},
});export default defineConfig({
base: '/',
plugins: [
less({
routesDir: 'app/routes',
islandsDir: 'app/islands',
componentsDir: 'app/components',
packageIslands: ['@lessjs/ui'],
html: {
lang: 'en',
title: 'My LessJS App',
},
build: {
outDir: 'dist',
},
}),
],
});