Apply crafty.css using css-loader

app/crafty/crafty.css

@@ -0,0 +1,95 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+html, body, canvas {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.code-area-container {
+  position: absolute;
+  right: 0px;
+  width: 35%;
+  height: 100%;
+  background-color: #cccccc;
+}
+.code-area {
+  background-color: #999999;
+  color: white;
+  border: none;
+  padding: 5px;
+  height: 100%;
+}
+.live-preview {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  background-color: #F7CAC9;
+}
+.buttons {
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  border: none;
+  font-size: 24px;
+  font-weight: bold;
+  color: #333333;
+}
+.buttons:active {
+  border: none;
+}
+input:focus {
+  outline: none;
+}
+
+#compile-message {
+  visibility: hidden;
+  min-width: 250px;
+  margin-left: -125px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  position: fixed;
+  left: 32.5%;
+  bottom: 30px;
+}
+#compile-message.show {
+  visibility: visible;
+  /*-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;*/
+  -webkit-animation: fadein 0.5s;
+  animation: fadein 0.5s;
+}
+#compile-message.hide {
+  visibility: visible;
+  -webkit-animation: fadeout 0.5s;
+  animation: fadeout 0.5s;
+}
+@-webkit-keyframes fadein {
+  from { bottom: 0; opacity: 0; }
+  to { bottom: 30px; opacity: 1; }
+}
+@keyframes fadein {
+  from { bottom: 0; opacity: 0; }
+  to { bottom: 30px; opacity: 1; }
+}
+@-webkit-keyframes fadeout {
+  from { bottom: 30px; opacity: 1; }
+  to { bottom: 0; opacity: 0; }
+}
+
+@keyframes fadeout {
+  from { bottom: 30px; opacity: 1; }
+  to { bottom: 0; opacity: 0; }
+}
+
+.define-function {
+  position: absolute;
+  top: 20px;
+  left: 65%;
+  width: 100px;
+  margin-left: -120px;
+  background-color: #F7CAC9;
+}

app/crafty/crafty.js

@@ -16,6 +16,8 @@ import jQuery from 'jquery';
 window.$ = $;
 window.jQuery = jQuery;
 
+import "./crafty.css";
+
 class Crafty {
   constructor() {
     this.checkDeleteBtn;

app/index.html

@@ -5,106 +5,9 @@
   <meta name="viewport" content="width=device-width" />
   <title>Crafty Canvas</title>
   <style>
-    * {
-      padding: 0;
-      margin: 0;
-    }
-    html, body, canvas {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-    .code-area-container {
-      position: absolute;
-      right: 0px;
-      width: 35%;
-      height: 100%;
-      background-color: #cccccc;
-    }
-    .code-area {
-      background-color: #999999;
-      color: white;
-      border: none;
-      padding: 5px;
-      height: 100%;
-    }
-    .live-preview {
-      position: absolute;
-      bottom: 20px;
-      right: 20px;
-      background-color: #F7CAC9;
-    }
-    .buttons {
-      width: 50px;
-      height: 50px;
-      border-radius: 25px;
-      border: none;
-      font-size: 24px;
-      font-weight: bold;
-      color: #333333;
-    }
-    .buttons:active {
-      border: none;
-    }
-    input:focus {
-      outline: none;
-    }
-
-    #compile-message {
-      visibility: hidden;
-      min-width: 250px;
-      margin-left: -125px;
-      background-color: #333;
-      color: #fff;
-      text-align: center;
-      border-radius: 2px;
-      padding: 16px;
-      position: fixed;
-      left: 32.5%;
-      bottom: 30px;
-    }
-    #compile-message.show {
-      visibility: visible;
-      /*-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;*/
-      -webkit-animation: fadein 0.5s;
-      animation: fadein 0.5s;
-    }
-    #compile-message.hide {
-      visibility: visible;
-      -webkit-animation: fadeout 0.5s;
-      animation: fadeout 0.5s;
-    }
-    @-webkit-keyframes fadein {
-      from { bottom: 0; opacity: 0; }
-      to { bottom: 30px; opacity: 1; }
-    }
-    @keyframes fadein {
-      from { bottom: 0; opacity: 0; }
-      to { bottom: 30px; opacity: 1; }
-    }
-    @-webkit-keyframes fadeout {
-      from { bottom: 30px; opacity: 1; }
-      to { bottom: 0; opacity: 0; }
-    }
-
-    @keyframes fadeout {
-      from { bottom: 30px; opacity: 1; }
-      to { bottom: 0; opacity: 0; }
-    }
-
-    .define-function {
-      position: absolute;
-      top: 20px;
-      left: 65%;
-      width: 100px;
-      margin-left: -120px;
-      background-color: #F7CAC9;
-    }
   </style>
 </head>
-
 <body>
-  <!-- code-area parts using pastel syntax highlighting -->
   <div class="code-area-container">
     <pre class="code-area" id="editor">
 (+ 1 1)
@@ -115,7 +18,6 @@
   <input class="define-function buttons" type="button" value="define" />
   <script>
   </script>
-
   <script src="bundle.js"></script>
 </body>
 

package.json

@@ -31,6 +31,7 @@
     "babel-runtime": "^6.6.1",
     "brace": "^0.9.0",
     "brfs": "^1.4.3",
+    "css-loader": "^0.26.1",
     "eslint": "^2.4.0",
     "file-loader": "^0.8.4",
     "html-loader": "^0.4.3",

webpack.config.js

@@ -22,6 +22,7 @@ module.exports = {
     },
     module: {
         loaders: [
+          { test: /\.css$/, loader: "style-loader!css-loader?root=." },
           { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query:{presets:['es2015']}},
           { test: /\.html$/, exclude: /node_modules/, loader: "file-loader?name=[path][name].[ext]"},
           { test: /\.jpe?g$|\.svg$|\.png$/, exclude: /node_modules/, loader: "file-loader?name=[path][name].[ext]"},