Skip to main content Skip to docs navigation
View on GitHub

Vite

Bundle Chassis CSS and JavaScript with Vite — Sass setup, Vite config, and the import order that loads tokens first.

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.

If you've read Installation, the moving parts are familiar; this guide just shows how they fit into a Vite project.

Setup

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

  1. Create a project folder and initialize npm.

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

  2. Install Vite.

    pnpm add -D vite

  3. Install Chassis CSS, its tokens, and Popper. Popper is needed by dropdowns, popovers, and tooltips; if you're not using those plugins you can omit it.

    pnpm add @chassis-ui/css @chassis-ui/tokens @popperjs/core

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

    pnpm add -D sass

Project structure

Create the source folders and the empty files you'll fill in below:

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

The result:

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

Configure Vite

  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.

    import { resolve } from 'path'

export default {
  root: resolve(__dirname, 'src'),
  build: {
    outDir: '../dist'
  },
  server: {
    port: 8080
  },
  // Optional: silence Dart Sass deprecation warnings
  css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ['import', 'mixed-decls', 'color-functions', 'global-builtin']
      }
    }
  }
}

  2. Fill in src/index.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 script to package.json.

    {
  "scripts": {
    "start": "vite"
  }
}

  4. Start the dev server.

    pnpm start

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

Import Chassis

The order matters: tokens must resolve before chassis.scss because the framework's _vendor.scss consumes $cx-* variables that the tokens package defines.

  1. Import tokens, then Chassis, in src/scss/styles.scss.

    // 1. Token source (must come before chassis.scss)
@import "@chassis-ui/tokens/dist/web/chassis/docs/main";

// 2. Optional: settings overrides
// $enable-rfs: false;
// $enable-component-shadows: true;

// 3. Chassis CSS
@import "@chassis-ui/css/scss/chassis";

    The token build path follows the pattern dist/web/{brand}/{app}/main. The default Chassis package ships with the chassis/docs build; for your own brand or app, switch the path accordingly.

  2. Import the stylesheet and Chassis JS in src/js/main.js. Popper is loaded automatically through Chassis when needed.

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

    For smaller bundles, import only the plugins you use:

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

  3. Reload. With both files filled in, Vite hot-reloads the page; you should now see the Chassis-styled heading and primary button.

Next steps