Converted to Webpack, had to replace all @extend with the actual CSS …

…for now

.bootstraprc

@@ -0,0 +1,15 @@
+---
+loglevel: disabled
+bootstrapVersion: 3
+styleLoaders:
+  - style
+  - css
+  - sass
+env:
+  development:
+    extractStyles: false
+  production:
+    extractStyles: true
+bootstrapCustomizations: ./src/styles/_bootstrap3.scss
+styles: true
+scripts: true

font-awesome.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  styleLoader: require("extract-text-webpack-plugin").extract("style-loader", "css-loader!sass-loader"),
+  styles: {
+    "mixins": true,
+    "bordered-pulled": true,
+    "core": true,
+    "fixed-width": true,
+    "icons": true,
+    "larger": true,
+    "list": true,
+    "path": true,
+    "rotated-flipped": true,
+    "animated": true,
+    "stacked": true
+  }
+}

package.json

@@ -5,8 +5,10 @@
   "main": "gulpfile.bable.js",
   "scripts": {
     "test": "NODE_ENV=test mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
-    "start": "gulp",
-    "lint": "gulp lint"
+    "test:watch": "npm test -- --watch",
+    "start": "webpack-dev-server --progress",
+    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress",
+    "lint": "eslint src"
   },
   "repository": {
     "type": "git",
@@ -19,48 +21,53 @@
   },
   "homepage": "https://github.com/mitre/ecqm-frontend",
   "devDependencies": {
-    "babel-core": "^6.4.5",
-    "babel-eslint": "^6.1.2",
+    "babel-core": "^6.10.4",
+    "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-polyfill": "^6.5.0",
+    "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-1": "^6.13.0",
-    "babelify": "^7.2.0",
+    "bootstrap-loader": "^1.0.10",
     "bootstrap-sass": "^3.3.6",
-    "browserify": "^13.0.0",
     "chai": "^3.5.0",
     "chai-jquery": "^2.0.0",
+    "copy-webpack-plugin": "^3.0.1",
+    "css-loader": "^0.23.1",
     "es6-promise": "^3.0.2",
+    "eslint": "^3.1.0",
     "eslint-plugin-react": "^6.2.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
     "font-awesome": "^4.5.0",
-    "gulp": "^3.9.0",
-    "gulp-concat": "^2.6.0",
-    "gulp-connect": "^5.0.0",
-    "gulp-eslint": "^3.0.1",
-    "gulp-open": "^2.0.0",
-    "gulp-sass": "^2.1.1",
+    "font-awesome-sass-loader": "^1.0.1",
     "history": "^3.2.1",
+    "html-webpack-plugin": "^2.22.0",
     "immutable": "^3.7.6",
     "isomorphic-fetch": "^2.2.0",
     "jquery": "^3.1.0",
     "jsdom": "^9.5.0",
     "mocha": "^3.0.2",
+    "node-sass": "^3.8.0",
     "react": "^15.3.1",
     "react-addons-test-utils": "^15.3.1",
     "react-dom": "^15.3.1",
     "react-redux": "^4.2.1",
     "react-router": "^2.0.0-rc5",
     "react-router-redux": "^4.0.5",
-    "reactify": "^1.1.1",
+    "react-transform-hmr": "^1.0.4",
     "redux": "^3.2.1",
     "redux-devtools": "^3.1.0",
     "redux-devtools-dock-monitor": "^1.0.1",
     "redux-devtools-log-monitor": "^1.0.3",
     "redux-logger": "^2.4.0",
-    "vinyl-source-stream": "^1.1.0"
-  },
-  "dependencies": {
-    "redux-promise-middleware": "^4.0.0"
+    "redux-promise-middleware": "^4.0.0",
+    "resolve-url-loader": "^1.6.0",
+    "sass-loader": "^4.0.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1",
+    "write-file-webpack-plugin": "^3.1.8"
   }
 }

src/index.js

@@ -4,6 +4,8 @@ import { render } from 'react-dom';
 import Root from './containers/Root';
 import configureStore from './store/configureStore';
 
+import './styles/application.scss';
+
 const store = configureStore();
 
 window.store = store;

src/index.html → src/index.tmpl.html

@@ -5,12 +5,8 @@
     <meta http-equiv="Cache-Control" content="no-cache">
     <meta http-equiv="x-ua-compatible" content="IE=edge">
     <title>popHealth : An Open Source Quality Measure Reference Implementation</title>
-    <link rel="stylesheet" href="/assets/css/bundle.css">
   </head>
   <body>
     <div id="app"></div>
-    <script src="/assets/scripts/jquery.js"></script>
-    <script src="/assets/scripts/bootstrap.js"></script>
-    <script src="/assets/scripts/bundle.js"></script>
   </body>
 </html>

src/styles/_bootstrap3.scss

@@ -1,7 +1,3 @@
-// Import bootstrap
-@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
-// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/theme";
-
 // Fonts
 @font-face {
   font-family: 'Roboto';

src/styles/_login.scss

@@ -11,9 +11,10 @@
   }
 
   .btn-login {
-    @extend .btn-primary;
-    @extend .btn-block;
-    @extend .btn-lg;
+    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+    @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
+    display: block;
+    width: 100%;
     margin: 30px 0;
     font-size: 1.5em;
     text-transform: uppercase;
@@ -38,7 +39,17 @@
   }
   @include center-block();
   #termsAndConditions {
-    @extend .well;
+    min-height: 20px;
+    padding: 19px;
+    margin-bottom: 20px;
+    background-color: $well-bg;
+    border: 1px solid $well-border;
+    border-radius: $border-radius-base;
+    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+    blockquote {
+      border-color: #ddd;
+      border-color: rgba(0,0,0,.15);
+    }
     max-height: 250px;
     overflow-y: auto;
   }

src/styles/_patient.scss

@@ -44,13 +44,25 @@
     }
 
     .submeasure-expander {
-      @extend .pull-right;
+      float: right !important;
       color: $brand-primary;
       margin: 0 0 3px 3px;
     }
 
     .measure-title {
-      @extend .panel-title;
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: ceil(($font-size-base * 1.125));
+      color: inherit;
+
+      > a,
+      > small,
+      > .small,
+      > small > a,
+      > .small > a {
+        color: inherit;
+      }
+
       color: inherit;
       display: inline-block;
       font-weight: 500;