Use Twitter Bootstrap LESS files with NPM, in Apostrophe CMS

Question

What is considered best practice if I want to use compile Bootstrap from LESS files in my Apostrophe project?

Is it better to install Bootstrap via NPM, or should I manually download Bootstrap and place the files in lib/modules/apostrophe-assets/?

I have reviewed the documentation that I am aware of to try and figure this out. I am not finding any documentation about including CSS and JS assets which are located outside of the lib folder.

Answer 1

I'm the lead developer of Apostrophe at P'unk Avenue.

You can put those files in lib/modules/apostrophe-assets/public/css (and subdirectories thereof, if desired) and include the one that imports all of the others in your configuration for apostrophe-assets, exactly as described in the tutorials:

Pushing assets to the browser

Or you can import it from a LESS file of your own that also imports your custom site-specific styles. That's really up to you.

Of course there is also nothing stopping you from adding assets directly to your outerLayout.html via link and script tags but if you want to take advantage of Apostrophe's minification process, follow the tutorial.

To be clear, any and all templates in Apostrophe can be overridden for your particular project WITHOUT modifying the node_modules/apostrophe folder in any way.

If a template exists at this path:

node_modules/apostrophe/lib/module/MODULE-NAME/views/TEMPLATE-NAME.html

Then just copy it here in your project:

lib/module/MODULE-NAME/views/TEMPLATE-NAME.html

And your version will be rendered instead.

You can use the Nunjucks extends keyword to extend templates that you invent yourself. You can also use cross-module syntax to extend templates that are in a different module:

{# Finds it in the apostrophe-templates module, your version first, #}
{# node_modules if that doesn't exist #}

{% extends "apostrophe-templates:layout.html" %}

Hope this clears things up a little better!