Swap to using webpack

package.json

@@ -3,21 +3,32 @@
   "main": "js/theme.js",
   "version": "0.4.3",
   "private": true,
-  "devDependencies": {
-    "bower": "^1.8.4",
+  "scripts": {
+    "start": "yarn webpack-dev-server --open --config webpack.dev.js",
+    "build": "yarn webpack --config webpack.prod.js"
+  },
+  "dependencies": {
+    "bourbon": "~4.3",
+    "bourbon-neat": "~1.7",
     "browserify": "^13.0.0",
-    "connect-livereload": "~0.6.0",
-    "grunt": "~1.0.1",
-    "grunt-banner": "^0.6.0",
-    "grunt-browserify": "^5.0.0",
-    "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-connect": "^1.0.2",
-    "grunt-contrib-copy": "~1.0.0",
-    "grunt-contrib-sass": "~1.0.0",
-    "grunt-contrib-uglify": "~3.3.0",
-    "grunt-contrib-watch": "~1.0.0",
-    "grunt-exec": "~1.0.1",
-    "grunt-open": "0.2.3",
-    "matchdep": "~1.0.1"
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "font-awesome": "^4.7.0",
+    "imports-loader": "^0.8.0",
+    "jquery": "^3.4.1",
+    "lato-font": "^3.0.0",
+    "matchdep": "~1.0.1",
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.12.0",
+    "roboto-fontface": "^0.10.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.1",
+    "webpack-merge": "^4.2.1",
+    "wyrm": "^1.0.9"
+  },
+  "devDependencies": {
+    "webpack-dev-server": "^3.3.1"
   }
 }

src/index.js

@@ -0,0 +1,3 @@
+import './sass/theme.sass';
+import './sass/badge_only.sass';
+import './theme.js';

sass/_theme_badge_fa.sass → src/sass/_theme_badge_fa.sass

@@ -1,6 +1,6 @@
 // Slimmer version of FA for use on the badge_only.sass file.
 
-+font-face(FontAwesome, '#{$font-awesome-dir}fontawesome-webfont')
++font-face(FontAwesome, '#{$fa-font-path}/fontawesome-webfont')
 
 .fa:before
   display: inline-block

src/sass/_theme_font_local.sass

@@ -0,0 +1,6 @@
+$lato-font-path: "~lato-font/fonts"
+$lato-variants: ('normal': 400, 'bold': 700)
+@import ~lato-font/scss/lato-font
+
+$roboto-font-path: "~roboto-fontface/fonts"
+@import ~roboto-fontface/css/roboto-slab/sass/roboto-slab-fontface

sass/_theme_variables.sass → src/sass/_theme_variables.sass

@@ -2,7 +2,7 @@
 // that are set in wyrm_core/wy_variables.sass. You'll find wyrm in bower_components if you're looking
 // for a reference.
 
-$font-awesome-dir:                    "../fonts/"
+$fa-font-path:                        "~font-awesome/fonts"
 $static-img:                          "../img/"
 
 $nav-content-width:                   800px

sass/badge_only.sass → src/sass/badge_only.sass

@@ -8,8 +8,8 @@ $border-box-sizing: false !default
 
 @import wyrm_core/wy_variables
 @import theme_variables
-@import bourbon
-@import neat
+@import ~bourbon/app/assets/stylesheets/bourbon
+@import ~bourbon-neat/app/assets/stylesheets/neat
 @import wyrm_core/mixin
 @import wyrm_core/grid_settings
 @import _theme_badge_fa

sass/theme.sass → src/sass/theme.sass

@@ -13,11 +13,11 @@
 @import theme_variables
 
 // bourbon.io framework
-@import bourbon
+@import ~bourbon/app/assets/stylesheets/bourbon
 
 // Bourbon.io/neat framework, with some default media queries
 @import wyrm_core/grid_settings
-@import neat
+@import ~bourbon-neat/app/assets/stylesheets/neat
 // Some corrections for neat
 @import wyrm_core/neat_extra