From 31fc9850bce36bfe6207e04340c0f4a13b7d2f4c Mon Sep 17 00:00:00 2001
From: Juho Ojala <juho@lucify.com>
Date: Thu, 14 Jan 2016 17:43:49 +0200
Subject: [PATCH] Apply namespacing also to scss, set file-loader as default
 for some extensions

---
 node_modules/sub-project/Index.css                    |  2 +-
 node_modules/sub-project/Index.scss                   |  7 +++++++
 node_modules/sub-project/index.js                     | 11 +++++++++--
 .../node_modules/sub-sub-project/Index.css            |  2 +-
 .../sub-project/node_modules/sub-sub-project/index.js |  2 +-
 .../node_modules/sub-sub-project/mixins.scss          |  4 ++++
 src/components/App.css                                |  2 +-
 src/components/App.js                                 |  8 +++++---
 webpack.config.js                                     |  9 +++++++--
 9 files changed, 36 insertions(+), 11 deletions(-)
 create mode 100644 node_modules/sub-project/Index.scss
 create mode 100644 node_modules/sub-project/node_modules/sub-sub-project/mixins.scss

diff --git a/node_modules/sub-project/Index.css b/node_modules/sub-project/Index.css
index a88cc0a..73b2844 100644
--- a/node_modules/sub-project/Index.css
+++ b/node_modules/sub-project/Index.css
@@ -1,4 +1,4 @@
 
 .cheetah {
-   background: url('file-loader!./cheetah.jpg');
+   background: url('./cheetah.jpg');
 }
diff --git a/node_modules/sub-project/Index.scss b/node_modules/sub-project/Index.scss
new file mode 100644
index 0000000..5718461
--- /dev/null
+++ b/node_modules/sub-project/Index.scss
@@ -0,0 +1,7 @@
+
+@import '~sub-sub-project/mixins.scss';
+
+.test2 {
+    font-size: 3rem;
+    @include blueColor();
+}
diff --git a/node_modules/sub-project/index.js b/node_modules/sub-project/index.js
index 627ab8c..d3b341c 100644
--- a/node_modules/sub-project/index.js
+++ b/node_modules/sub-project/index.js
@@ -1,11 +1,13 @@
 
 import styles from './Index.css';
+import styles2 from './Index.scss';
+
 
 var React = require('react');
 var Sub = require('sub-sub-project');
 
 
-var url = require("file-loader!./giraffe.jpg");
+var url = require("./giraffe.jpg");
 
 //var url = require("./giraffe.jpg");
 
@@ -13,10 +15,15 @@ module.exports = React.createClass({
 
   render: function() {
     return (
+
       <div>
+        <div className={styles2.test2}>
+          Blue text via mixin from sub-sub-project
+        </div>
+
         Giraffe from sub-project via javascript
         <div>
-        <img src={url} style={{width: 500}} />
+          <img src={url} style={{width: 500}} />
         </div>
         Cheetah from sub-project via css
         <div>
diff --git a/node_modules/sub-project/node_modules/sub-sub-project/Index.css b/node_modules/sub-project/node_modules/sub-sub-project/Index.css
index b0cea8a..20c0176 100644
--- a/node_modules/sub-project/node_modules/sub-sub-project/Index.css
+++ b/node_modules/sub-project/node_modules/sub-sub-project/Index.css
@@ -1,4 +1,4 @@
 
 .cheetah {
-   background: url('file-loader!./crocodile.jpg');
+   background: url('./crocodile.jpg');
 }
diff --git a/node_modules/sub-project/node_modules/sub-sub-project/index.js b/node_modules/sub-project/node_modules/sub-sub-project/index.js
index d5154d8..de72302 100644
--- a/node_modules/sub-project/node_modules/sub-sub-project/index.js
+++ b/node_modules/sub-project/node_modules/sub-sub-project/index.js
@@ -4,7 +4,7 @@ import styles from './Index.css';
 
 // is actually a parrot, but we use the name giraffe
 // to demonstrate that there is no global namespace issue
-var url = require("file-loader!./giraffe.jpg");
+var url = require("./giraffe.jpg");
 
 
 module.exports = React.createClass({
diff --git a/node_modules/sub-project/node_modules/sub-sub-project/mixins.scss b/node_modules/sub-project/node_modules/sub-sub-project/mixins.scss
new file mode 100644
index 0000000..167d66b
--- /dev/null
+++ b/node_modules/sub-project/node_modules/sub-sub-project/mixins.scss
@@ -0,0 +1,4 @@
+
+@mixin blueColor {
+  color: blue;
+}
diff --git a/src/components/App.css b/src/components/App.css
index 2474f04..13eaacb 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -13,5 +13,5 @@
 }
 
 .turtle {
-   background: url('file-loader!./turtle.jpg');
+   background: url('./turtle.jpg');
 }
diff --git a/src/components/App.js b/src/components/App.js
index a993165..a8df8cf 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -8,7 +8,9 @@ import ClassCompositionDemo from './3-ClassComposition/ClassCompositionDemo';
 import CompositionOverridesDemo from './4-CompositionOverrides/CompositionOverridesDemo';
 import ScopedAnimationsDemo from './5-ScopedAnimations/ScopedAnimationsDemo';
 
-var url = require("file-loader!./camel.jpg");
+var url = require("./camel.jpg");
+//var url = require("camel.jpg");
+
 var Testi = require('sub-project');
 var jsonUrl = require('file-loader!./data-example.json');
 
@@ -21,8 +23,8 @@ export default class App extends Component {
       <div className={styles.app}>
         <Logo />
 
-        <div className="test">
-            Moi
+        <div className={styles2.test}>
+            Red text via mixin from subproject
         </div>
 
         <div>
diff --git a/webpack.config.js b/webpack.config.js
index d40a54c..ca2ed6f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -39,8 +39,13 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        loaders: ["style", "css", "sass"]
-      }
+        loaders: ["style", "css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]", "sass"]
+      },
+      {
+        test: /\.(jpeg|jpg|gif|png|json)$/,
+        loaders: ["file-loader?name=[name]-[hash:12].[ext]"]
+      },
+
     ]
   }
 }