node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »



Bundle a CSS file and all of its assets into a single directory. This means you don't have to worry about file paths. If you separate you CSS into components, you might run into this problem. You don't want to have to worry about dozens of component folders and paths.


npm install -g css-bundler


Command Line

css-bundler {input} {output}


A grunt task is included. Load the tasks with grunt.loadNpmTasks('css-bundler') and add some config:

cssbundler: {
  options: {
    prefix: 'foo/bar'
  foo: {
    src: 'src/index.css',
    dest: 'build/build.css'

See the grunt docs on Configuring Tasks as it uses the standard Grunt API.

Dynamic Bundles

You can create multiple bundles at once using Grunt's dynamic file mapping:

cssbundler: {
  all: {
    files: [{
      expand: true,
      src: ['bundles/**/build.css'],
      dest: 'build',
      ext: '.bundled.css'

This will create multiple bundles and create a build directory in each one with the built bundle. This means you don't need to manually configure each and every bundle.


var Bundler = require('css-bundler');
var bundle = new Bundler({
  // options
});'path/to/file.css', 'path/to/output', function(){
  // Callback


Let's say you have a CSS file called index.css:

.foo {
    background: url('path/to/image.png');

With the image in the relative directory. You can bundle this into a new directory and file with all of the assets:

css-bundler index.css build/build.css

This will create a build.css file in the build directory relative to the current directory. It will rewrite the paths:

.foo {
    background: url('6edf7858c7afecac61ee6bf5df17f196.png');

And it will copy the image to the build directory.