Page type SCSS includes

site/src/scss/_bootstrap_variables.scss

@@ -0,0 +1,10 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+// bootstrap minify bugfix:
+$navbar-dark-toggler-icon-bg: none;
+$navbar-light-toggler-icon-bg: none;
+
+// IE > 9
+$enable-flex: true;

site/src/scss/_variables.scss

@@ -1,10 +1,5 @@
+@import "_bootstrap_variables";
+
 /*
  * Your custom variables
- */
-
-// bootstrap minify bugfix:
-$navbar-dark-toggler-icon-bg: none;
-$navbar-light-toggler-icon-bg: none;
-
-// IE > 9
-$enable-flex: true;
+ */

site/src/scss/app.scss

@@ -1,10 +1,6 @@
-// Your custom variables
-@import "variables";
-
 // Bootstrap basics
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
+@import "_bootstrap_variables";
+
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/type";
@@ -38,9 +34,12 @@
 @import "~bootstrap/scss/utilities";
 @import "~bootstrap/scss/print";
 
-// Font Awesome
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
+// Your custom variables
+@import "_variables";
+
 // Your custom UI
-@import "layout";
+@import "types/typography";
+@import "_layout";

site/src/scss/types/HomePage.scss

@@ -0,0 +1 @@
+@import "../variables";

site/src/scss/types/typography.scss

@@ -0,0 +1 @@
+@import "../variables";

webpack.config.common.js

@@ -5,7 +5,7 @@ const ManifestPlugin = require("webpack-manifest-plugin");
 const conf = require("./webpack.configuration");
 const isProduction = process.env.NODE_ENV === "production";
 
-const jsScripts = {
+const includes = {
     app: path.join(conf.SRC, "js/app.js"),
 };
 
@@ -30,11 +30,17 @@ const _getAllFilesFromFolder = function(dir) {
 // add page specific scripts
 const pageScripts = _getAllFilesFromFolder(conf.PAGES);
 pageScripts.forEach((file) => {
-    jsScripts[path.basename(file, ".js")] = file;
+    includes[path.basename(file, ".js")] = file;
+});
+
+// add page specific scss
+const scssIncludes = _getAllFilesFromFolder(conf.PAGESSCSS);
+scssIncludes.forEach((file) => {
+    includes[path.basename(file, ".scss")] = file;
 });
 
 module.exports = {
-    entry: jsScripts,
+    entry: includes,
     devtool: "source-map",
     externals: {
         "jquery": "jQuery",
@@ -58,6 +64,13 @@ module.exports = {
                     ]
                 },
             }
+        }, {
+            test: /\.tsx?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/
+        }, {
+            test: /\.coffee?$/,
+            use: 'coffee-loader'
         }, {
             test: /\.(png|jpg|gif|svg)$/,
             loader: "file-loader",
@@ -71,6 +84,12 @@ module.exports = {
             }
         }]
     },
+    resolve: {
+        alias: {
+            'jquery': require.resolve('jquery'),
+            'jQuery': require.resolve('jquery'),
+        }
+    },
     plugins: [
         new webpack.ProvidePlugin({
             $: "jquery",