rolldown-plugin-inline

Import files as strings or bytes in Rolldown with the inline: import prefix.

import { defineConfig } from "rolldown";
import inline from "rolldown-plugin-inline";

export default defineConfig({
  input: "src/index.ts",
  plugins: [inline()],
});

import text from "inline:./content.md?raw";
import css from "inline:./style.scss";
import bytes from "inline:./font.woff2?bytes";

Install

pnpm add -D rolldown-plugin-inline

Preprocessors are optional peer dependencies. Install only the ones your project uses:

pnpm add -D sass-embedded lightningcss

• sass-embedded is needed for extension-based preprocessing on .scss and .sass files.
• lightningcss is needed for the default css, scss, and sass preprocessors.

Client Types

Import the client declaration once if TypeScript does not know these prefixed imports:

import "rolldown-plugin-inline/client";

Or add it to compilerOptions.types:

{
  "compilerOptions": {
    "types": ["rolldown-plugin-inline/client"]
  }
}

Imports

• inline:<path> imports the file as a string after extension-based preprocessing.
• inline:<path>?raw imports the file as an unprocessed UTF-8 string.
• inline:<path>?bytes imports the file as a Uint8Array.

?raw and ?bytes cannot be used together.

Options

inline({
  preprocess: {
    scss: async (code, id) => code,
  },
});

Default preprocessors are provided for css, scss, and sass. They compress CSS output by default, and any configured preprocessor with the same name replaces the default. Compression reads your project browserslist configuration when one is available.

The plugin resolves only imports that start with inline:. Plain file imports are left to the rest of your bundler pipeline.