Great question! In the years that we were building our themes we were able to experiment with a lot of different ways to build themes and firmly settled on one as the best structure for building and maintaining. Here’s roughly how it works:
- @import bootstrap/functions.scss
- @import custom/variables.scss
- @import bootstrap/variables.scss
- @import bootstrap/bootstrap.scss
- @import custom/components.scss
- Compile it all!
This works extremely well and has a lot of advantages:
- Leverage the variables of Bootstrap’s core to easily customize basics without editing the core code at all
- Easily modify Bootstrap components to any degree by using same selectors as core SCSS, but in a stylesheet included later. Again, full flexibility without editing the source.
- Add any additional variants to components or brand new components at the end
- This structure makes upgrading Bootstrap versions considerably easier
We’re not going to require any specific tooling, but we do have some recommendations to stay closer to Bootstrap core’s tooling:
- Use Gulp over other build tools
- Have fewer simple commands to execute the basics: compiling, watching, etc.