Skip to main content Skip to docs navigation
View on GitHub

Parcel

Bundle Chassis CSS and JavaScript with Parcel — zero-config Sass detection and the import order that keeps tokens loading first.

On this page

Parcel is a zero-configuration web application bundler. It automatically installs language transformers as it detects them, which makes it the lightest of the three guides — most of the work is just creating files and importing things in the right order.

If you've read Installation, the moving parts are familiar; this guide just shows how they fit into a Parcel 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 Parcel. Parcel is the only build dependency — it'll install the Sass transformer for you when it sees a .scss file.

    pnpm add -D parcel

  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

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

The result:

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

Parcel needs an HTML page as its entry point and an npm script to start the server. We'll set those up next.

Configure Parcel

Parcel itself needs no configuration file. The HTML page is the entry point, and Parcel follows the imports from there.

  1. Fill in src/index.html. Reference the stylesheet and the script from this file directly — Parcel resolves both, compiles them, and rewrites the references at build time.

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

    When Parcel sees the .scss reference, it'll auto-install the Sass transformer. If you'd rather install it manually, run pnpm add -D @parcel/transformer-sass.

  2. Add the start script to package.json.

    {
  "scripts": {
    "start": "parcel serve src/index.html --public-url / --dist-dir dist"
  }
}

  3. Start the dev server.

    pnpm start

    Parcel opens a local server on http://localhost:1234. The page won't be styled yet — we still need to fill in the stylesheet and the 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 Chassis JS in src/js/main.js. Popper is loaded automatically through Chassis when needed.

    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, Parcel hot-reloads the page; you should now see the Chassis-styled heading and primary button.

Sass deprecation warnings

Recent Dart Sass versions print deprecation warnings for syntax used in older codebases. They don't prevent compilation. To silence them in Parcel, add a .sassrc.js file to the project root:

module.exports = {
  silenceDeprecations: ['import', 'mixed-decls', 'color-functions', 'global-builtin']
}

Next steps