cssdjangotwitter-bootstrapdjango-pipeline

Overriding Bootstrap in django-pipeline


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.


Solution

  • 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' %}