Basic Usage

Importing CSS

Import CSS files directly in your JavaScript:

// src/index.js
import './styles.css'
import './theme.scss'

// rollup.config.js
import requireCSS from 'rollup-plugin-require-css'

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

CSS Modules

CSS Modules are automatically enabled for .module.css files:

// Auto-detect .module.css files
import styles from './button.module.css'

console.log(styles.button) // "_button_x5f2a"

Or force enable for all CSS:

requireCSS({ modules: true })

CSS Module Example

button.module.css

.button {
  padding: 8px 16px;
  border-radius: 4px;
}
.primary {
  background: blue;
  color: white;
}

button.js

import styles from './button.module.css'

export function Button() {
  const button = document.createElement('button')
  button.className = `${styles.button} ${styles.primary}`
  return button
}

With Preprocessors

The plugin supports Sass/SCSS, Less, and Stylus out of the box:

# Install your preferred preprocessor
pnpm add -D sass
# or
pnpm add -D less
# or
pnpm add -D stylus

import './styles.scss'
import './theme.less'
import './base.styl'

Configure preprocessor options:

requireCSS({
  preprocessor: {
    sass: { includePaths: ['src/styles'] },
    less: { paths: ['src/styles'] },
    stylus: { paths: ['src/styles'] }
  }
})

With PostCSS

Use PostCSS plugins like autoprefixer:

pnpm add -D postcss autoprefixer

requireCSS({
  postcss: {
    enabled: true,
    plugins: [
      require('autoprefixer')()
    ]
  }
})

Source Maps

Generate source maps for CSS:

requireCSS({
  sourcemap: true,      // Generate inline source map
  sourcemap: 'inline',  // Inline source map
  sourcemap: 'external' // External .css.map file
})

Output Options

Single Output

requireCSS({
  output: 'style.css'
})

Dynamic Output Name

requireCSS({
  output: (chunk) => `${chunk.name}.css`
})

Minification

Enable CSS minification:

requireCSS({
  minify: true
})

With fine-grained control:

requireCSS({
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantValues: true,
    mergeRules: false,
    optimizeSelectors: false
  }
})