rollup-plugin-css-asset

1.0.2 verified Mon Apr 27 auth: no javascript maintenance

A Rollup plugin that bundles imported CSS files into a separate CSS asset file, respecting Rollup's asset handling and sourcemap options. Version 1.0.2 is the current stable release; the plugin is in maintenance mode with no recent updates. It differentiates from other CSS plugins by focusing on simplicity: no post-processing, no JS injection, just emitting CSS as a Rollup asset with hashing and path customization. Requires Rollup >=1.19.0.

Common errors

error Error: Cannot find module 'rollup-plugin-css-asset' ↓

cause Package not installed or not in devDependencies.

fix

Run: npm install --save-dev rollup-plugin-css-asset

error TypeError: css is not a function ↓

cause Using CommonJS require() instead of ESM import.

fix

Change to: import css from 'rollup-plugin-css-asset'

error The emitted file 'assets/bundle-xxxxx.css' does not contain any CSS content. ↓

cause No CSS files imported in the JavaScript bundle.

fix

Add import './styles.css' in your entry file.

Warnings

gotcha Plugin does not process CSS (no autoprefixer, minification, etc.); it emits CSS as-is. ↓

fix Combine with postcss plugin (e.g., rollup-plugin-postcss) if CSS processing is needed.

gotcha CSS files must be imported in JavaScript to be bundled; standalone CSS references are ignored. ↓

fix Ensure all CSS files are imported in your entry points or dependencies.

gotcha The plugin only emits a single CSS asset per build; multiple inputs produce one CSS file. ↓

fix Use code splitting or multiple plugin instances if separate CSS outputs are required.

breaking Version 1.0.0 dropped support for Rollup <1.19.0. ↓

fix Upgrade Rollup to >=1.19.0.

Install

npm install rollup-plugin-css-asset

yarn add rollup-plugin-css-asset

pnpm add rollup-plugin-css-asset

Imports

default (css)

wrong

const css = require('rollup-plugin-css-asset')

correct

import css from 'rollup-plugin-css-asset'

Plugin is ESM-only; CommonJS require will fail.

css (named import)
wrong
```
import { default as css } from 'rollup-plugin-css-asset'
```
correct
```
import { css } from 'rollup-plugin-css-asset'
```
Package exports both default and named 'css', but default is preferred for clarity.
TypeScript types
```
import css from 'rollup-plugin-css-asset'
```
Package includes TypeScript types; no separate type import needed.

Quickstart

Basic Rollup configuration using rollup-plugin-css-asset to bundle CSS into a separate asset file with hashing and sourcemaps.

// rollup.config.js
import css from 'rollup-plugin-css-asset';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es',
    sourcemap: true,
    assetFileNames: 'assets/[name]-[hash][extname]',
  },
  plugins: [
    css({
      name: 'bundle',
    }),
  ],
};