external stylesheet is loaded

3-flux/src/index.html

@@ -12,7 +12,6 @@
   <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cerulean/bootstrap.min.css" rel="stylesheet">
 
   <!-- Custom Fonts -->
-  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
   <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 </head>

3-flux/src/js/components/Todo.js

@@ -16,15 +16,16 @@ export default class Todo extends React.Component {
 
     const icon = complete ? "../../assets/icon_done.svg" : "../../assets/icon_not_done.svg";
     const trash = "../../assets/icon_trash.svg";
-    const iconStyle = {
+
+    const trashStyle = {
       maxWidth: "50px",
       padding: "5px"
     };
 
     const checkboxStyle = {
       maxWidth: "50px",
       padding: "10px"
-    }
+    };
 
     if (edit) {
       return (
@@ -37,7 +38,7 @@ export default class Todo extends React.Component {
     return (
       <li>
         <span><img style={checkboxStyle} src={icon} /></span>
-        <span onClick={this.deleteTodo.bind(this)}><img style={iconStyle} src={trash} /></span>
+        <span onClick={this.deleteTodo.bind(this)}><img style={trashStyle} src={trash} /></span>
         <span>{text}</span>
       </li>
     );

3-flux/src/js/pages/Favorites.js

@@ -2,9 +2,16 @@ import React from "react";
 
 export default class Archives extends React.Component {
   render() {
+
+    const headerStyling = {
+      fontFamily: "Roboto",
+      color: "#3C1053",
+      marginBottom: "20px"
+    };
+
     return (
       <div>
-        <h1>Favorites</h1>
+        <h1 style={headerStyling}>Favorites</h1>
       </div>
     );
   }

3-flux/src/js/pages/Layout.js

@@ -4,6 +4,8 @@ import { Link } from "react-router";
 import Footer from "../components/layout/Footer";
 import Nav from "../components/layout/Nav";
 
+import "../../styles.css";
+
 export default class Layout extends React.Component {
   render() {
     const { location } = this.props;

3-flux/src/js/pages/Settings.js

@@ -2,9 +2,16 @@ import React from "react";
 
 export default class Settings extends React.Component {
   render() {
+
+    const headerStyling = {
+      fontFamily: "Roboto",
+      color: "#3C1053",
+      marginBottom: "20px"
+    };
+
     return (
       <div>
-        <h1>Settings</h1>
+        <h1 style={headerStyling}>Settings</h1>
       </div>
     );
   }

3-flux/src/js/pages/Todos.js

@@ -52,7 +52,7 @@ export default class Todos extends React.Component {
 
     return (
       <div>
-        <h1 style={headerStyling}>A List of things To Do</h1>
+        <h1 style={headerStyling}>To Do</h1>
         <NewTodo />
         <ul style={customUl}>{TodoComponents}</ul>
       </div>

3-flux/src/styles.css

@@ -0,0 +1,3 @@
+body {
+  background-color: #000;
+}

3-flux/webpack.config.js

@@ -17,7 +17,10 @@ module.exports = {
           plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
         }
       },
-        { test: /\.css$/, loader: "style-loader!css-loader" }
+      {
+        test: /\.css$/,
+        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
+      }
     ]
   },
   output: {