Basic Example

This example demonstrates basic CSS import and bundling.

Features Tested

• CSS import
• CSS bundling
• Minification
• Source maps

Configuration

import requireCSS from 'rollup-plugin-require-css'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'es',
    sourcemap: true
  },
  plugins: [
    requireCSS({
      output: 'dist/style.css',
      minify: true,
      sourcemap: true
    })
  ]
}

Source Code

src/index.js

import './styles.css'

export function createButton() {
  const button = document.createElement('button')
  button.className = 'btn btn-primary'
  button.textContent = 'Click me'
  return button
}

src/styles.css

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background-color: #2563eb;
}

Try It

cd examples/basic
pnpm install
pnpm run build

Output

dist/style.css

.btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}.btn-primary{background-color:#3b82f6;color:#fff}.btn-primary:hover{background-color:#2563eb}
/*# sourceMappingURL=style.css.map */

Try Online

• StackBlitz
• CodeSandbox