CSS Loading

Beta

Bun doesn’t ship with a CSS loader. They have it on the roadmap but no release date is known at this time.

We provide a custom CSS loader plugin that just works™. Built on top of Lightning CSS. You’ll need to install Lightning CSS as a dependency.

npm install lightningcss --save-dev

Afterwards you may use x-import to load css files directly. Bundle transpiles it and injects it on your page with zero effort.

<x-import module="tippy.js" as="tippy" />
<x-import module="tippy.js/dist/tippy.css" />

Sass

You can use Bundle to compile Sass on the fly. You’ll need to install both Sass & Lightning CSS in your project. Bundle takes care of the rest.

npm install sass lightningcss --save-dev

Due to a unresolved issue Bun is not able to auto-install LightningCSS & Sass on the fly. When this issue is fixed you won’t have to install these dependencies yourself. Bun will automatically install them when needed 💅

Local CSS loading

This works similarly to local modules. Simply add a new path alias to your jsconfig.json file.

{
  "compilerOptions": {
    "paths": {
      "~/css": ["./resources/css/*"]
    }
  }
}

Now you can load css from your resources directory.

<x-import module="css/foo-bar.css" />

Browser targeting

Bundle automatically compiles many modern CSS syntax features to more compatible output that is supported in your target browsers. This includes some features that are not supported by browsers yet, like nested selectors & media queries, without using a preprocessor like Sass. Check here for the list of the many cool new syntaxes Lightning CSS supports.

You can define what browsers to target using your package.json file:

{
  "browserslist": ["last 2 versions", ">= 1%", "IE 11"]
}


Bundle currently only supports browserslist using your package.json file. A dedicated .browserslistrc is not suppported at this time.