install all depends

Author: thejackwu

package.json

@@ -21,7 +21,13 @@
     "write-file-webpack-plugin": "4.5.0"
   },
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "jquery": "^3.4.1",
-    "moment": "^2.24.0"
+    "moment": "^2.24.0",
+    "node-sass": "^4.12.0",
+    "popper.js": "^1.15.0",
+    "postcss-loader": "^3.0.0",
+    "precss": "^4.0.0",
+    "sass-loader": "^7.1.0"
   }
 }

src/css/popup.css src/css/popup.scsssrc/css/popup.css renamed to src/css/popup.scss

@@ -1,3 +1,5 @@
+@import "~bootstrap/scss/bootstrap";
+
 .container {
   width: 30em;
   padding-bottom: 1em;
@@ -10,7 +12,7 @@
 }
 
 #time-entries button {
-  float: right
+  float: right;
 }
 
 .ongoing-badge {
@@ -53,4 +55,4 @@ button {
 
 .project-button-block .title {
   color: grey;
-}
+}

src/js/popup.js

@@ -1,5 +1,6 @@
 'use strict';
-import "../css/popup.css";
+import "../css/popup.scss";
+import 'bootstrap';
 import { showError, loading, finishLoading } from "./popup/popup_helpers.js";
 import { loadAllTimeEntries, loadAllProjectsAndActivities, startProjectTimer, stopActivityTimer } from "./popup/api_call.js";
 import moment from 'moment';

webpack.config.js

@@ -45,6 +45,26 @@ var options = {
         test: /\.html$/,
         loader: "html-loader",
         exclude: /node_modules/
+      },
+      {
+        test: /\.(scss)$/,
+        use: [{
+          loader: 'style-loader', // inject CSS to page
+        }, {
+          loader: 'css-loader', // translates CSS into CommonJS modules
+        }, {
+          loader: 'postcss-loader', // Run post css actions
+          options: {
+            plugins: function () { // post css plugins, can be exported to postcss.config.js
+              return [
+                require('precss'),
+                require('autoprefixer')
+              ];
+            }
+          }
+        }, {
+          loader: 'sass-loader' // compiles Sass to CSS
+        }]
       }
     ]
   },