This will include the code (<link> and <script> tags) to include the
bundles on the page. It will generate the HTML for either the individual files
or the bundled files based on TEMPLATE_DEBUG.

Media Types

The css() helper will, by default, generate <link> tags with a
media attribute set to screen,projection,tv. You can override this by
passing an optional second parameter to the css() helper, e.g.:

{{ css('print-bundle', 'print') }}

This would create a <link> tag with media="print".

Bundling and Minifying

To bundle and minify your CSS and JS, run the management command:

./manage.py compress_assets

This will create two files per bundle in your media directory, one that
looks like bundle-all.js (or .css) and one that looks like
bundle-min.js. Only the *-min.* version will be used. It also creates a
file called build.py along side manage.py that contains unique IDs
based on the SHA of the current git checkout.

Minifier Options

You can choose between YUICompressor (Java) or UglifyJS/clean-css (node) for
minifying. You don't have to do anything to get YUICompressor working.

If you want to use the node counterparts, just add UGLIFY_BIN and
CLEANCSS_BIN (set to the correct paths, of course) to your settings.py.
You can see the actual syntax if you look at the Installation section of this
README.

Cache Busting Individual Images

Depending on your CDN, you may need to cache-bust assets referenced in the CSS.
To do this, add the following to your settings:

CACHEBUST_IMGS = True

It will go through your CSS, and find any reference to local resources. It
will append the short id for the commit that most recently modified the
resource, so that it only cache busts resources that are actually modified.

The list of images that couldn't be found can be displayed by running the
command with --verbosity=2 (or -v2).

manage.py compress_assets -v2

Note

This is off by default. It does a lot of I/O, so be careful if you have
large amounts of massive images. Additionally, it uses a hash of the file.
This isn't 100% collision proof, but it should be more than good enough.

Using LESS

If you want to use less files and have LESS_BIN defined, less is supported
automatically in a few ways.

To use a less file, simply include a file in a CSS bundle that ends with
.less.

For development, if you want to use the less JavaScript runtime compiler,
you'll have to figure out how to include it in your project.

If you want to compile less on the server, even in development, add a
setting: LESS_PREPROCESS = True. Your less files will be recompiled on
every request.

In production, less files are automatically compiled before being bundled
with the rest of the CSS.