--- title: 'CSS imports' slug: css-imports description: 'Import CSS from Svelte, TypeScript, or JavaScript files and have it bundled and injected automatically.' --- ## CSS imports Side-effect `import` of a `.css` file from any `.svelte`, `.ts`, or `.js` module bundles the stylesheet out-of-band and links it from the page ``. The import is stripped from both the SSR and client JS bundles, so the `.css` content never ships through JavaScript. ```svelte ``` Bare specifiers resolve through `package.json#main`, so `@fontsource/*`, CSS-only libraries, and any package that points its main entry at a stylesheet all work the same way. Relative paths (`import './styles.css'`) resolve from the importing file. The bundle is served as `/_mochi/import-css/-.css` (with `assetPrefix` configurable on `Mochi.serve`). Mochi tracks the imports reachable from each page entry and injects a `` only on pages that actually use them. ```ts // file: src/lib/icons.ts import 'tippy.js/dist/tippy.css'; ``` The import can live anywhere in the dependency graph — a leaf `.ts` module, a hydratable island, or the page component itself. Mochi follows the bundle, not the call site. A failed CSS import (missing package, malformed file) surfaces as a `css-bundle-failed` entry in the dev error overlay and as an inline `console.error` in the browser. Fix the path; the side-effect strip only fires on `.css` files Bun could resolve. Do **NOT** load third-party stylesheets via runtime `` tags in the shell when the asset ships with an npm package; instead, import it side-effect-style so it goes through the bundler with the rest of your CSS. ### Component-scoped ` ``` Do **NOT** import the same stylesheet from both a `