A global stylesheet is an ordinary CSS file imported from a JavaScript module. Put import "./globals.css"; at the top of the root layout and it applies to every route. Stylesheets published by a package are imported the same way, by package path — import "bootstrap/dist/css/bootstrap.css"; — from anywhere under app/, including a colocated component.
Ordering follows import order, which is not always the order you expect. If a page imports <BaseButton> before its own page.module.css, the button's stylesheet lands first and the page's rules win ties; swapping the import lines flips the cascade. Keep CSS imports in few entry files, and switch off any lint rule that sorts imports.
Confirm the result with next build, not next dev. Development serves each stylesheet separately so Fast Refresh can swap one file at a time; a production build concatenates and minifies them into per-route chunks, and the two orders can disagree. cssChunking in next.config.ts controls that merging.