skier. v1.0.0

bundleCssTask

Bundle and minify CSS files into a single optimized stylesheet.

When to Use

✅ Use bundleCssTask when you want:

  • Multiple CSS files combined into one
  • Production minification
  • Consistent ordering of stylesheets

❌ Use copyStaticTask instead for:

  • Pre-minified CSS libraries
  • CSS you don't want modified

Quick Start

bundleCssTask({
  from: 'src/styles',
  to: 'public',
  output: 'styles.min.css',
  minify: true,
})

Input: All .css files in src/styles/ Output: Single public/styles.min.css

Configuration

Option Type Required Description
from string ✅ Source CSS directory
to string ✅ Output directory
output string ✅ Output filename
minify boolean Minify output (default: true)

Type signature

The exact BundleCssConfig interface, transcluded from source so it stays in step with the shipping code:

export interface BundleCssConfig {
  from: string; // source directory
  to: string; // output directory
  output: string; // output filename (e.g. styles.min.css)
  minify?: boolean;
}

Every task's config type together: API Reference → Config Interfaces.

File Order

Files are concatenated in alphabetical order. Control ordering with filename prefixes:

src/styles/
├── 01-reset.css        # First: CSS reset
├── 02-variables.css    # Second: Custom properties
├── 03-base.css         # Third: Base styles
├── 10-components.css   # Components
├── 20-layouts.css      # Layouts
└── 99-utilities.css    # Last: Utility overrides

Development vs Production

Disable minification for readable debug output:

bundleCssTask({
  from: 'src/styles',
  to: 'public',
  output: process.env.NODE_ENV === 'production'
    ? 'styles.min.css'
    : 'styles.css',
  minify: process.env.NODE_ENV === 'production',
})

Referencing in Templates

Link to your bundled stylesheet:

<link rel="stylesheet" href="/styles.min.css">