Demonstrate import path rewriting in example app

shakacode · May 10, 2017 · fa099b3 · fa099b3
1 parent 6582c4e
commit fa099b3
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 7 deletions.
diff --git a/example/app/assets/styles/mixins.scss b/example/app/assets/styles/mixins.scss
@@ -1,3 +1,2 @@
-@mixin center-text {
-  text-align: center;
-}
+@import 'mixins/centerText';
+@import 'mixins/fullWidth';
diff --git a/example/app/assets/styles/mixins/centerText.scss b/example/app/assets/styles/mixins/centerText.scss
@@ -0,0 +1,3 @@
+@mixin center-text {
+  text-align: center;
+}
diff --git a/example/app/assets/styles/mixins/fullWidth.scss b/example/app/assets/styles/mixins/fullWidth.scss
@@ -0,0 +1,3 @@
+@mixin full-width {
+  width: 100%;
+}
diff --git a/example/app/components/Hero/Hero.scss b/example/app/components/Hero/Hero.scss
@@ -1,7 +1,7 @@
 .hero {
   @include center-text;
+  @include full-width;
   margin-bottom: 50px;
-  width: 100%;
   height: 70vh;
   background-color: $background-color;
   color: $text-color;

diff --git a/example/app/layout/Layout.scss b/example/app/layout/Layout.scss
@@ -4,7 +4,7 @@
 }
 
 .layout {
+  @include full-width;
   display: block;
   position: relative;
-  width: 100%;
 }
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -47,7 +47,10 @@ module.exports = {
           {
             loader: 'sass-resources-loader',
             options: {
-              resources: './app/assets/styles/**/*.scss',
+              resources: [
+                './app/assets/styles/variables/*.scss',
+                './app/assets/styles/mixins.scss',
+              ],
             },
           },
         ],

diff --git a/example/webpack.prod.config.js b/example/webpack.prod.config.js
@@ -43,7 +43,12 @@ module.exports = {
             'sass-loader',
             {
               loader: 'sass-resources-loader',
-              query: { resources: './app/assets/styles/**/*.scss' },
+              query: {
+                resources: [
+                  './app/assets/styles/variables/*.scss',
+                  './app/assets/styles/mixins.scss',
+                ],
+              },
             },
           ],
         }),