// Custom.scss
// Option A: Include all of Bootstrap
+// Include any default variable overrides here (though functions won't be available)
+
@import "../node_modules/bootstrap/scss/bootstrap";
-// Add custom code after this
+// Then add additional custom code here
```
```scss
// Custom.scss
// Option B: Include parts of Bootstrap
-// Required
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+
+// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
-// Include custom variable default overrides here
-
-// Optional
+// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
```scss
-// Required
@import "../node_modules/bootstrap/scss/functions";
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/mixins";
-// Your variable overrides
+// Default variable overrides
$body-bg: #000;
$body-color: #111;
-// Bootstrap and its default variables
+// Required
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/mixins";
-// Optional
+// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
projects / thirdparty / bootstrap.git / commitdiff
