Please allow external build for Bootstrap scss

You can certainly use an external build with any bundler of your choice like Webpack/Vite!

Though, when using an external build for your bootstrap SCSS, you won’t be able to use the design panel (afaik bootstrap doesn’t have a bootstrap.config.js like tailwind.config.js), and your SCSS files won’t be listed in the stylesheet manager anymore as it’s compiled externally, and hence any Pinegrow way of customizing SCSS won’t apply anymore.

But, if your usage primarily involves using Pinegrow visual features to design your page, props panel for all bootstrap classes & library panel for classes & components, then an external build is a nice combo where you have great flexibility to manage your assets the way you want and run through all optimisations to get a slimmer bundle.

Here is quick github template with Bootstrap 5 + Vite - GitHub - TechAkayy/pg-bootstrap5-vite-app. Bootstrap’s official docs has a nice guide on using Vite (and other bundlers), but note there is one minor difference in this template. We use Vite only as a bundler (lib mode) to watch-build and not it’s dev-server during development. Check it out, and share your feedback!

After github clone/fork, run these commands in your external terminal before opening src/index.html in Pinegrow

npm install
npm run watch

Disclaimer: It has been ages I have worked on bootstrap, so would appreciate other bootstrap pros in the community to correct me if I have missed anything :slight_smile:

1 Like