Overriding Bootstrap in django-pipeline

Question

I have a Django application with which I am using the django-pipeline package and bootstrap.css:

PIPELINE_CSS = {
'myCSS': {
    'source_filenames': (
        'css/bootstrap.css',
        'css/bootstrapoverride.css',

    ),
    'output_filename': 'bootmin.css',
    'variant': 'datauri',
},

}

As you can see above I have included an additional file "bootstrapoverride.css" which I was hoping to use to override some features of Bootstrap, for instance in my override file:

.navbar {
min-height: 100px;
        }

So I thought this may work, but no override is happening, maybe this is not possible using pipeline. I would like to avoid editing the bootstrap.css file directly. Thank you for any insight here.

Answer 1

You can do this, but I would set your project up a bit differently. I would have a vendor bundle and and a separate company or project specific bundle.

An example would look something like this;

PIPELINE_CSS = {
'vendor': {
    'source_filenames': (
        'css/bootstrap.css',

    ),
    'output_filename': 'vendor.css',
    'variant': 'datauri',
},
'project': {
    'source_filenames': (
        'css/bootstrapoverride.css',

    ),
    'output_filename': 'project.css',
    'variant': 'datauri',
},
}

And then include them in this order in your base.html file:

{% stylesheet 'vendor' %}
{% stylesheet 'project' %}