--- name: bootstrap-npm description: Build a Bootstrap 6 starter project using just npm and command-line tools (no bundler). Use when setting up Bootstrap with npm, compiling Bootstrap's Sass to CSS from the command line, or creating an npm-based Bootstrap project. guide: /guides/npm --- # Bootstrap 6 with npm Set up a Bootstrap 6 project that compiles Sass to CSS using npm command-line tools, with no JavaScript bundler. Bootstrap's pre-built JS bundle is loaded directly via a ` ``` 3. `package.json` — add scripts. Note `--load-path=node_modules` so Sass resolves `bootstrap`: ```json { "scripts": { "css-compile": "sass --load-path=node_modules --style expanded --source-map --embed-sources scss:css", "css-prefix": "postcss --config postcss.config.js --replace \"css/*.css\" \"!css/*.min.css\"", "build": "npm-run-all --sequential css-compile css-prefix", "watch": "nodemon --watch scss/ --ext scss --exec \"npm run build\"", "serve": "sirv --port 8080 --dev .", "start": "npm-run-all build --parallel watch serve", "lint": "stylelint \"scss/**/*.scss\"" } } ``` 4. `stylelint.config.mjs`: ```js /** @type {import('stylelint').Config} */ export default { extends: 'stylelint-config-twbs-bootstrap' } ``` 5. Start the dev server: ```sh npm start ``` --- ## Step 4: Import Bootstrap's Sass Add to `scss/styles.scss` using the modern `@use` rule (never `@import`): ```scss // Import all of Bootstrap's CSS @use "bootstrap/scss/bootstrap"; ``` Customize tokens with `with ()` — include only the keys you want to change: ```scss @use "bootstrap/scss/bootstrap" with ( $root-tokens: ( --border-radius: .25rem, --spacer: 1.5rem, ) ); ``` Override CSS custom properties through the token maps (`$root-tokens` and each component's `$*-tokens` map), following [Customize › Sass](https://getbootstrap.com/docs/6.0/customize/sass/#compile-time-overrides). Token names are written **unprefixed** in Sass (e.g. `--border-radius`, `--spacer`); Bootstrap's dist/CDN CSS runs PostCSS to add the `--bs-` prefix, so compiling the source yourself keeps them unprefixed. --- ## Step 5: Verify 1. Run `npm start` and open `http://localhost:8080` — the `.container` and `.btn-solid.theme-primary` button should be styled once the CSS compiles. 2. Confirm `css/styles.css` is generated and updates when you edit `scss/styles.scss` (watch is running). 3. Confirm no console errors from the JS bundle. 4. Run `npm run lint` to check Sass against Bootstrap's stylelint config. 5. Bootstrap 6 requires a browser that supports `oklch()` and `color-mix()`. For an optimized build that imports only the parts of Bootstrap you use, see the [twbs/examples sass-js project](https://github.com/twbs/examples/tree/main/sass-js).