This demonstrates building a custom CSS file with Bootstrap's source Sass files, managed via npm. While not a complete solution, this demo highlights how to change default variables, create a custom stylesheet, and choose specific parts of CSS to include.
11 |Note: This demo doesn't include compiling Bootstrap's JavaScript.
12 |In addition to our package.json and some support files, this demo includes two key files:
index.html — the page you're looking atbootstrap-custom.scss — a Sass stylesheet where we'll modify and compile our CSSBootstrap's source Sass code is spread across dozens of smaller .scss files. By default, we include every one of these files in what we call our "import stack," a series of @import statements in the source bootstrap.scss files.
To demonstrate how to optionally include Bootstrap piece-by-piece, the full Bootstrap import stack has been commented out in our custom.scss file, save for a handful of components:
functions, variables, and mixins — useful tools for interacting with and customizing Bootstrap's default styles.reboot — our opinionated browser normalization styles.type — our default typography styles.code — our inline and block code styles.grid — our layout and grid system styles.utilities — all our utility classes for rapid prototyping.You may uncomment any of the additional imports, add new imports, or even write new styles.
34 | 35 |Built into npm is the ability to run scripts or tasks, like compiling CSS, via the command line. The package.json in any npm package typically includes scripts unique to that project. Here's how to use our this demo's npm scripts to compile a custom Bootstrap build.
bootstrap-npm.npm start. This will compile the CSS for the first time.index.html file in any browser to see a styled page using your freshly compiled CSS.To watch the source bootstrap-custom.scss file for changes, enter npm run watch to automatically recompile as necessary.
When using npm start, any changes you make to your custom.scss will automatically cause the Sass file to recompile. Refresh your HTML page to see those changes in action.
Those just getting started with Bootstrap and npm may wish to build on this project's package.json by adding new dependencies and scripts. Please do!