Add sass-resources-loader usage example

shakacode · Oct 27, 2018 · 2b1ec52 · 2b1ec52
1 parent 8265303
commit 2b1ec52
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 1 deletion.
diff --git a/examples/basic/.bootstraprc-3-example b/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

diff --git a/examples/basic/.bootstraprc-4-example b/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,

diff --git a/examples/basic/app/markup/bootstrap-dev.html b/examples/basic/app/markup/bootstrap-dev.html
@@ -147,6 +147,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">

diff --git a/examples/basic/app/markup/bootstrap-prod.html b/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">

diff --git a/examples/basic/app/styles/bootstrap/pre-customizations.scss b/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;
diff --git a/examples/basic/app/styles/resources.scss b/examples/basic/app/styles/resources.scss
@@ -0,0 +1 @@
+$custom-border-radius: 50px;
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -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": {

diff --git a/examples/basic/yarn.lock b/examples/basic/yarn.lock
@@ -429,6 +429,13 @@ async@^1.5.0:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
+async@^2.1.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
+  integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
+  dependencies:
+    lodash "^4.17.10"
+
 async@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
@@ -3224,6 +3231,18 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@~7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.1:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -4421,7 +4440,7 @@ loader-runner@^2.3.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
   integrity sha1-9IKuqC1UPgeSFwDVpG7yb9rGuKI=
 
-[email protected], loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+[email protected], loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=
@@ -6678,6 +6697,16 @@ [email protected]:
     neo-async "^2.5.0"
     pify "^3.0.0"
 
+sass-resources-loader@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/sass-resources-loader/-/sass-resources-loader-1.3.4.tgz#493d6992fa2538d21d1bc6839351a68f791e5c85"
+  integrity sha512-/vTIDdR8GYb3+6KzbbaTwTsMDq4a4/jx1p4z6yT4lC485x0cbEe/Qe2+es6ayNrMH/udJwN0qY3I6q/3J2gYHQ==
+  dependencies:
+    async "^2.1.4"
+    chalk "^1.1.3"
+    glob "^7.1.1"
+    loader-utils "^1.0.4"
+
 sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"