Skip to main contentSkip to docs navigation
View on GitHub

Vite

Bundle Chassis CSS and JavaScript with Vite — Sass setup, Vite config, and token resolution.

On this page

Vite is a fast, modern frontend build tool. This guide walks through a fresh project; if you already have Vite set up, jump to Import Chassis.

Installation covers the moving parts — the only Vite-specific work here is configuring the Sass preprocessor options.

Setup

This guide assumes Node.js is installed and you're comfortable in a terminal.

  1. Create a project folder and initialize npm.

    Shell
    mkdir my-project && cd my-project
pnpm init

  2. Install Vite.

    Shell
    pnpm add -D vite

  3. Install Chassis CSS and its tokens. Add the optional peer dependencies for the components that need them, or omit both and use chassis.bundle.* which includes them.

    Shell
    pnpm add @chassis-ui/css @chassis-ui/tokens
pnpm add @floating-ui/dom vanilla-calendar-pro   # optional

  4. Install Sass. Vite handles .scss files when Sass is present.

    Shell
    pnpm add -D sass

Project structure

Create the source folders and starter files:

Shell
mkdir -p src/js src/scss
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

The result:

TEXT
my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package.json
├── pnpm-lock.yaml
└── vite.config.js

Configure Vite

The steps below fill in vite.config.js, the starter HTML, and the npm scripts needed to run and build the project.

  1. Fill in vite.config.js. This config tells Vite where the source lives, where to emit the build, and which port the dev server should use. The loadPaths entry lets Sass resolve token overrides placed in src/scss.

    JavaScript
    import { resolve } from 'path'

export default {
  root: resolve(__dirname, 'src'),
  build: {
    outDir: '../dist'
  },
  server: {
    port: 8080
  },
  css: {
    preprocessorOptions: {
      scss: {
        loadPaths: [resolve(__dirname, 'src/scss')]  // project token override
      }
    }
  }
}

  2. Fill in src/index.html.

    HTML
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chassis CSS w/ Vite</title>
    <script type="module" src="./js/main.js"></script>
  </head>
  <body>
    <div class="container py-large px-medium mx-auto">
      <h1>Hello, Chassis CSS and Vite!</h1>
      <button class="button primary">Primary button</button>
    </div>
  </body>
</html>

  3. Add the start and build scripts to package.json.

    JSON
    {
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}

  4. Start the dev server.

    Shell
    pnpm start

    Vite opens a local server on http://localhost:8080. The page won't be styled yet — the stylesheet and entry script still need to be filled in.

Import Chassis

Vite needs a Sass entry point that imports Chassis. The loadPaths entry in vite.config.js ensures Sass can resolve token overrides from src/scss.

  1. Fill in src/scss/styles.scss. The token source resolves through _vendor.scss before the rest of Chassis processes its variables, so a single @use directive is all that's needed.

    SCSS
    // Chassis CSS — token source resolves via the loadPaths entry in vite.config.js
@use "@chassis-ui/css/scss/chassis";

// Optional: settings overrides use the `with (...)` syntax
// @use "@chassis-ui/css/scss/chassis" with (
//   $enable-fluid-font-sizes: false,
//   $enable-component-shadows: true,
// );

    The default token build (chassis/docs) is resolved automatically. To switch to a custom token set, place a _chassis-tokens.scss on an earlier loadPaths entry — see Customize → Sass for details.

  2. Import the stylesheet and Chassis JS in src/js/main.js. Floating UI and vanilla-calendar-pro are resolved through the bundler when needed.

    JavaScript
    import '../scss/styles.scss'
import * as chassis from '@chassis-ui/css'

    For smaller bundles, import only the required plugins:

    JavaScript
    import { Modal, Tooltip } from '@chassis-ui/css'

  3. Reload. With both files filled in, Vite hot-reloads the page — the heading and button should now render with Chassis styling.

Build optimizations

Unlike webpack's style-loader, Vite never injects CSS via a <style> tag — it always emits a separate .css file when running vite build. No additional plugin is needed for CSS extraction.

Next steps

These docs cover JavaScript integration, Sass customization, and bundle optimization for a Vite-based Chassis project.