Make it up with sass-resources-loader

examples/basic/.bootstraprc-3-example

@@ -20,12 +20,14 @@ env:
       - css-loader
       - sass-loader
       - postcss-loader
+      - sass-resources-loader?resources=app/styles/resources.scss
   production:
     extractStyles: true
     styleLoaders:
       - css-loader
       - sass-loader
       - postcss-loader
+      - sass-resources-loader?resources=app/styles/resources.scss
 
 # Customize Bootstrap variables that get imported before the original Bootstrap variables.
 # Thus original Bootstrap variables can depend on values from here. All the bootstrap

examples/basic/.bootstraprc-4-example

@@ -14,12 +14,14 @@ env:
       - css-loader
       - sass-loader
       - postcss-loader
+      - sass-resources-loader?resources=app/styles/resources.scss
   production:
     extractStyles: true
     styleLoaders:
       - css-loader
       - sass-loader
       - postcss-loader
+      - sass-resources-loader?resources=app/styles/resources.scss
 
 # Extract styles to stand-alone css file
 # Different settings for different environments can be used,

examples/basic/README.md

@@ -24,3 +24,17 @@ yarn run bs4:prod
 # Run no config
 yarn run bs:no-config
 ```
+
+### Notes
+
+`sass-resources-loader` imports specified SASS files into every SASS file it processes. In this particular case, `styleLoaders` are (Bootstrap 3, development):
+
+```yaml
+- style-loader
+- css-loader
+- sass-loader
+- postcss-loader
+- sass-resources-loader?resources=app/styles/resources.scss
+```
+
+So, `app/styles/resources.scss` is implicitly imported into `app/styles/bootstrap/pre-customizations.scss` among other things. There `$custom-border-radius` value is assigned to `$alert-border-radius`. You can see the alert affected at the bottom of the page.

examples/basic/app/markup/bootstrap-dev.html

@@ -144,6 +144,10 @@ <h4 class="card-title">Card title</h4>
         </div>
       </div>
 
+      <div class="alert alert-info" role="alert">
+        You can use <code>sass-resources-loader</code> with <code>bootstrap-loader</code>
+      </div>
+
       <div id="modal" class="modal fade">
         <div class="modal-dialog" role="document">
           <div class="modal-content">

examples/basic/app/markup/bootstrap-prod.html

@@ -149,6 +149,10 @@ <h4 class="card-title">Card title</h4>
         </div>
       </div>
 
+      <div class="alert alert-info" role="alert">
+        You can use <code>sass-resources-loader</code> with <code>bootstrap-loader</code>
+      </div>
+
       <div id="modal" class="modal fade">
         <div class="modal-dialog" role="document">
           <div class="modal-content">

examples/basic/app/styles/bootstrap/pre-customizations.scss

@@ -24,3 +24,5 @@ $fonts-url-path: "../fonts";
 // $icon-font-path: ../fonts // This path is relative to this file
 // $icon-font-name: 'glyphicons' // The name of the font you want to use
 // And be sure to set useCustomIconFontPath to true in .bootstraprc.
+
+$alert-border-radius: $custom-border-radius;

examples/basic/app/styles/resources.scss

@@ -0,0 +1 @@
+$custom-border-radius: 50px;

examples/basic/package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "postinstall":
-      "rm -rf node_modules/bootstrap-loader && mkdir node_modules/bootstrap-loader && cd ../../ && yarn run build && cd - && cp -r ../../{package.json,loader.js,no-op.js,extractStyles.js,.bootstraprc-3-default,.bootstraprc-4-default,lib} node_modules/bootstrap-loader/ && cd node_modules/bootstrap-loader && yarn install --production",
+      "rm -rf node_modules/bootstrap-loader && mkdir -p node_modules/bootstrap-loader && cd ../../ && yarn run build && cd - && cp -r ../../{package.json,loader.js,no-op.js,extractStyles.js,.bootstraprc-3-default,.bootstraprc-4-default,lib} node_modules/bootstrap-loader/ && cd node_modules/bootstrap-loader && yarn install --production",
     "start": "NODE_ENV=development nodemon --watch app/markup --ext html server.dev.js",
     "clean": "rm -rf public/",
     "cleanrc": "rm .bootstraprc || echo 'no .bootstraprc file to delete'",
@@ -39,6 +39,7 @@
     "font-awesome": "^4.7.0",
     "jquery": "3.3.1",
     "popper.js": "1.14.3",
+    "sass-resources-loader": "^1.3.4",
     "tether": "1.4.4"
   },
   "devDependencies": {