Styling with Bootstrap Source

A site built on Bootstrap is easiest to change later when Bootstrap is compiled from its SCSS source inside the site, with the site's own decisions layered on top. Pasting a design's compiled CSS into one stylesheet looks finished on day one, but every later brand change means hunting through generated rules.

The three stylesheets
• /_variables.scss holds brand decisions as Bootstrap variable overrides — colors ($primary, $secondary, …), fonts, spacing, border radius. It is a partial: it is never compiled or attached on its own.
• /main.scss imports /_variables.scss first, then Bootstrap's own SCSS source (the Bootstrap 5 package puts it at /bootstrap5/scss/bootstrap.scss), then any icon fonts, then the site's component rules or imports of component partials. It is the one stylesheet the site attaches.
• Component rules go after the Bootstrap import, so they can use Bootstrap's variables, mixins, and utility classes.

@import "/_variables.scss";
@import "/bootstrap5/scss/bootstrap.scss";
@import "/bootstrap-icons/font/bootstrap-icons.scss";
// site components below

Attach /main.scss once, from the shared header, with {% add_stylesheet "/main.scss" %}. The CMS compiles it on publish, so the package never carries compiled CSS. Bootstrap's javascript is not attached by default; add it with {% add_javascript "/bootstrap5/js/bootstrap.bundle.min.js" %} only when components need it.

Turning a design mirror into variables
When the starting point is a static design built with Bootstrap, read its compiled CSS for the values that differ from Bootstrap's defaults — the brand colors, font families, base font size, border radius, container widths — and write each as a variable override in /_variables.scss. Keep the design's custom component rules, and move them after the Bootstrap import in /main.scss. Drop the copy of Bootstrap the mirror shipped; the site compiles its own.

When the source is not recoverable
Sometimes only compiled CSS exists and its variables cannot be reconstructed with confidence. Then keep the compiled CSS as its own stylesheet, say so plainly in the site's documentation as a known constraint, and add new work in SCSS on top of it. Do not present frozen compiled CSS as if it were the editable source.

Standards
A full site package built this way follows Marketpath Site Standards 1 with the Bootstrap 5 variant (standard:mpss1-bootstrap5): the same /_variables.scss and /main.scss names, and the MPSS1 header and footer inputs. The complete example mpss1-bootstrap5 shows the whole shell.