Example using css-modules and the latest version of react-templates.

client/config/development/entry.js

@@ -1,5 +1,9 @@
 import { createHistory, useQueries } from 'history';
 
+import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
+import '!style-loader!css-loader!font-awesome/css/font-awesome.css';
+import 'assets/css/app.scss';
+
 import app from 'client/app';
 
 app(useQueries(createHistory));

client/config/development/webpack.js

@@ -9,8 +9,7 @@ const ROOT = CLIENT + '/..';
 // Identical to development webpack config, except minified.
 module.exports = {
   entry: {
-    app: __dirname + '/entry',
-    style: __dirname + '/style'
+    app: __dirname + '/entry'
   },
   devtool: 'source-map',
   output: {
@@ -22,12 +21,12 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel'
-      }, {
-        test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('style', 'css!sass?sourceMap=true')
       }, {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap=true')
+        loader: 'style-loader!css-loader?modules'
+      }, {
+        test: /\.scss$/,
+        loader: 'style-loader!css-loader?modules!sass-loader'
       }, {
         test: /\.json$/,
         loader: 'json'
@@ -57,7 +56,7 @@ module.exports = {
         loader: 'url?limit=10000&mimetype=image/svg+xml'
       }, {
         test: /\.rt\.html$/,
-        loader: 'react-templates-loader?targetVersion=0.14.0'
+        loader: 'react-templates-loader?modules=amd'
       }
     ]
   },
@@ -90,4 +89,3 @@ module.exports = {
     }
   }
 }
-

package.json

@@ -91,16 +91,16 @@
     "i18next-xhr-backend": "^0.5.3",
     "immutable": "3.8.x",
     "jquery": "2.2.x",
-    "morgan": "~1.5.1",
     "moment": "2.13.x",
+    "morgan": "~1.5.1",
     "query-string": "^3.0.0",
     "react": "0.14.7",
     "react-addons-test-utils": "0.14.7",
     "react-bootstrap": "0.29.x",
     "react-dom": "0.14.7",
     "react-redux": "4.4.x",
-    "react-templates": "0.4.x",
-    "react-templates-loader": "0.4.x",
+    "react-templates": "^0.5.4",
+    "react-templates-loader": "^0.5.1",
     "redux": "3.5.x",
     "redux-act": "0.5.x",
     "redux-loop": "2.1.x",

server/assets/css/app.scss

@@ -1,16 +1,18 @@
-html, body {
-  height:100%;
-}
-#app_container {
-  min-height: 100%;
-  position:relative;
-  padding-bottom:100px;
-}
-#app_footer {
-  width:100%;
-  padding:15px;
-  position:absolute;
-  bottom:0px;
-  border-top:2px solid darkgrey;
-  background-color:#F8F8F8;
+:global {
+  html, body {
+    height:100%;
+  }
+  #app_container {
+    min-height: 100%;
+    position:relative;
+    padding-bottom:100px;
+  }
+  #app_footer {
+    width:100%;
+    padding:15px;
+    position:absolute;
+    bottom:0px;
+    border-top:2px solid darkgrey;
+    background-color:#F8F8F8;
+  }
 }

shared/components/layouts/test/test.component.js

@@ -0,0 +1,20 @@
+/*global module*/
+
+import React from 'react';
+
+import template from './test.rt.html';
+import SpikeComponent from 'shared/lib/base_classes/spike_component';
+
+class TestComponent extends SpikeComponent {
+
+  get template(){
+    return template;
+  }
+
+}
+
+TestComponent.propTypes = {
+
+};
+
+module.exports = TestComponent;

shared/components/layouts/test/test.rt.html

@@ -0,0 +1,5 @@
+<rt-import name="*" as="styles" from="./test.scss"/>
+
+<div class="{styles.testWrapper}">
+  TestComponent body!
+</div>

shared/components/layouts/test/test.scss

@@ -0,0 +1,5 @@
+.testWrapper {
+  background-color: red;
+  width: 300px;
+  height: 400px;
+}

shared/components/layouts/test/test.test.js

@@ -0,0 +1,14 @@
+/*global describe it expect console*/
+
+import TestUtils from 'react-addons-test-utils';
+import React from 'react';
+
+import Test from './test.component';
+
+describe('Test component', ()=>{
+  it('renders without problems', (done)=>{
+      test = TestUtils.renderIntoDocument(React.createElement(Test) );
+      expect(test.state).toEqual({});
+      done();
+  });
+});

shared/lib/routes.js

@@ -2,9 +2,14 @@ import Details from './routes/details/details.route';
 import Index from './routes/index/index.route';
 import Login from './routes/login/login.route';
 import Missing from './routes/missing/missing.route';
+import Test from './routes/test/test.route';
 
 export function defineRoutes(i18n) {
   return includeHelpers([
+    new Test({
+      path: new RegExp(`^\/?((\\w{2})\/)?(${i18n.t('test')})$`),
+      parameters: {2: 'locale'}
+    }),
     new Index({
       path: new RegExp(`^\/?((\\w{2})\/?)?$`),
       parameters: {2: 'locale'}

shared/lib/routes/test/test.route.js

@@ -0,0 +1,18 @@
+/*global*/
+
+import RouteBase from '../route.base';
+
+class Test extends RouteBase {
+
+  get route_name(){
+    return 'Test';
+  }
+
+  get component(){
+    return require('shared/components/layouts/test/test.component');
+  }
+
+}
+
+export default Test;
+

shared/lib/routes/test/test.test.js

@@ -0,0 +1,31 @@
+/*global describe it expect*/
+
+import { testSharedRouteBehavior } from '../route.base.test';
+import { defineRoutes } from '../../routes';
+import i18n from 'shared/lib/i18n/i18nFactory.mock';
+
+let route = defineRoutes(i18n).getRoute('Test');
+
+describe('Test route', ()=>{
+  testSharedRouteBehavior(route);
+
+  it('detects location', ()=>{
+    expect(route.matchesLocation('test')).toBe(true);
+    expect(route.matchesLocation('/en/test')).toBe(true);
+  });
+
+  it('properly sets params', ()=>{
+    let params = route.parseParams({pathname: '/en/test'});
+    expect(params).toEqual({locale: 'en'});
+  });
+
+  it('can create url from action', ()=>{
+    let action = {payload: {}};
+    expect(route.url(action, i18n)).toEqual('/en/test');
+  })
+
+  it('has a component', ()=>{
+    expect(typeof route.component).toEqual('function');
+  });
+
+});