Instructions for using Bulma components about django-bulma

[tehfink]

Here's what I ended up doing in order to use Bulma's swatches & components, in case it helps anyone. Is there a better method?

Beginning with what's currently in the documentation:
pip install django-bulma
Add to settings.py: 'bulma',
Set up bulma & extensions:
python manage.py copy_bulma_static_into_project
python manage.py bulma install
Locate the directory with package.json, in order for npm to install in the correct place:
cd …my_django_project/static/bulma/sass
npm install bulmaswatch bulma-extensions
python manage.py bulma start

My style.sass looks like:

// 1. Import the initial variables
@import "./node_modules/bulma/sass/utilities/initial-variables"

// 2. Set your own initial variables
@import './node_modules/bulmaswatch/simplex/_variables';

// 3. Import the rest of Bulma
@import "./node_modules/bulma/bulma"

// 4. Import your stuff here
@import './node_modules/bulma-extensions/bulma-carousel/src/sass/index';
@import './node_modules/bulmaswatch/simplex/_overrides';

And in the django template:

{% block css %}
    <link rel="stylesheet" href="{% static 'bulma/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'bulma/css/style.css' %}">
    {% block extra_css %}{% endblock extra_css %}
{% endblock css %}
…
{% block extra_javascript %}
<script type="text/javascript" src="{% static 'bulma/sass/node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.min.js' %}"></script>
<script type="text/javascript">
    var carousels = bulmaCarousel.attach(); // carousels now contains an array of all Carousel instances
</script>
{% endblock extra_javascript %}