CODEWITHSUNDEEP
grailsbootstrap-5asset-pipelinepopper.js
Bioman
Bioman

Reputation: 31

Use grails-asset-pipeline to compile bootstrap 5 from source

I'm trying to figure out how to compile the latest bootstrap (v5.0.2) from source so I can more easily customize the theme using SASS variables for a grail (v5.2.3) app using the grails asset-pipeline.

I've been able to get the .scss to compile and load via the asset pipeline by making these changes to the build.gradle:

 buildscript{
     dependencies{
         classpath "com.bertramlabs.plugins:asset-pipeline-gradle:4.0.0"
         classpath 'com.bertramlabs.plugins:sass-dart-asset-pipeline:4.0.0'
     }
 }

 assets {
     includes = [ '**/bootstrap.scss' ]
     excludes = [ '**/_*.scss' ]
 }

I downloaded the bootstrap-5.0.2.zip source distribution, unzip it, copied the bootstrap-5.0.2/scss/ folder to the 'grails-app/assets/stylesheets/bootstrap-5.0.2-scss' folder inside my app, and update the 'grails-app/assets/stylesheets/application.css' file to include the top level bootstrap.scss file:

 *
-*= require bootstrap
+*= require bootstrap-5.0.2-scss/bootstrap
 *= require grails
 *= require main

When I run my app using ./gradlew bootRun the styling is loading from .css, but some of the javascript features seem to be broken. For example, if I click on a dropdown menu the dropdown does not appear.

I figured this means I also need to install javascript libraries that come with bootstrap 5.0.2. I tried importing bootstrap.bundle.js copying the "bootstrap.bundle.js" file that comes with the bootstrap-5.0.2 distribution, and making this modification to 'grails-app/assets/javascripts/application.css'

 //= require jquery-3.5.1.min 
 //= require popper.min
-//= require bootstrap
+//= require bootstrap.bundle
 //= require_self

But the dropdown menus still do not show up.

Am I going about this the right way? Are there other javascript assets I need to use bootstrap v5 in my asset-pipeline?

Upvotes: 0

Views: 428

Answers (1)

Bioman
Bioman

Reputation: 31

It turns out I was being silly, it was not a JavaScript issue, it was a breaking change in the bootstrap "API". The drop-down toggle uses an attribute called 'data-toggle' in bootstrap v4, and the corresponding attribute in bootstrap v5 is data-bs-toggle. After I updated the attribute names the drop-down menus worked as expected.

Upvotes: 1

Related Questions