Customizing composer.json - do I need `vendor` in VCS or on my server?

I created my own theme which uses the Bootstrap front-end toolkit, and I want to use the Bootstrap SCSS mixins like @include media-breakpoint-up(md) as well as doing things like modifying the default colors. I have this working by adding the Bootstrap SCSS source files (from Download · Bootstrap v4.6) in user/themes/MYTHEME/scss/bootstrap-4.6.0 (approx 90 files) and then putting this in my theme.scss (which is referenced in base.html.twig after being compiled):

@import 'bootstrap-4.6.0/bootstrap';

I can now do things like:

$margin-below-navbar: 96px;
$margin-below-navbar-md: 56px;

.main {
    margin-top: $margin-below-navbar;

    @include media-breakpoint-up(md) {
        margin-top: 56px;
    }
}

Beautiful (at least to my immature CSS eyes)!

This is working but I don’t need those 90 Bootstrap SCSS files on my server once they are compiled by the SASS compiler, so I thought maybe I should download Bootstrap with composer instead (composer require twbs/bootstrap:4.6.0, for example).

This caused two problems. First, I had to update composer from 2.0.9 to 2.0.12 or above because the new Github tokens were not compatible (see bug #9757 - Composer). Running composer self-update took it to 2.1.3.

Second, when I ran the composer require command, over 2400 files were added or changed in the vendor directory, mostly nothing to do with Bootstrap.

So I’ve gone from 90 files too many to over 2400 too many :frowning:

I started thinking - do I need the vendor directory on the server? Do I even need it in my version control if it can be generated by composer? Or at worst, can I just not commit the latest updates in the vendor directory and leave it as it came with grav-admin v1.75 in Feb 2021 + the upgrade to v1.7.10 in April 2021?

1 Like

I thought about this and realized that what I was doing was not right. I will have trouble each time I upgrade Grav. Instead of using Composer at the root level, I changed my method to use npm within my theme directory to download Bootstrap with npm install --save bootstrap@4.6.0

@johnsgp, You should have used composer at the theme level, not the root level.

Anyway, I would advise to use npm. Bootstrap provides the correct tooling like a package.json with dependencies and scripts. By the way, why not using the latest bootstrap@5.0.1?

1 Like

@pamtbaau Thanks for confirming that I made a good choice. Thanks also for reminding me about the tooling. I should add Dart Sass to package.json. I’m more familiar with npm as I’ve done a bit of front-end programming and it feels more natural than composer for a front-end theme.

Regarding Bootstrap version - I learned v4 a few years ago and was reluctant to upgrade (in my brain) before getting my theme started. I’ll probably upgrade soon, after I can add the CDN integrity checks for jsdelivr.net, coming in v1.7.17 relating to Issues with SRI implementation · Issue #3358 · getgrav/grav · GitHub

@pamtbaau I’ve just read in Migrating to v5 · Bootstrap v5.0 that Bootstrap 5 has dropped jQuery, something I’ve been waiting for. I’m migrating now … as soon as I’ve read how to fix my navbar :slight_smile:

1 Like