issue #6: adding webpack config for SASS compilation

README.md

@@ -6,6 +6,8 @@ To install run
 
 ``` bash
 git clone https://github.com/PyMavs/pymavs.github.io
+cd pymavs.github.io
+npm install
 ```
 
 ## Pushing Changes

package.json

@@ -7,7 +7,8 @@
     "doc": "docs"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "repository": {
     "type": "git",
@@ -20,13 +21,14 @@
   },
   "homepage": "https://github.com/PyMavs/pymavs.github.io#readme",
   "devDependencies": {
-    "node-sass": "^4.9.3",
+    "css-loader": "^1.0.0",
+    "mini-css-extract-plugin": "^0.4.4",
+    "node-sass": "^4.9.4",
     "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "url-loader": "^1.1.2",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.1"
   },
-  "dependencies": {
-    "css-loader": "^1.0.0",
-    "style-loader": "^0.23.0"
-  }
+  "dependencies": {}
 }

src/app.js

@@ -0,0 +1,3 @@
+import './index.scss';
+
+console.log("Welcome! Greetings from app.js. Let's learn Webpack2");

src/index.scss

@@ -31,7 +31,7 @@ a{
     flex-shrink: 0;
     height: 200px;
 
-    background: url("./resc/img/py_logo_md.png") no-repeat center;
+    background: url("../resc/img/py_logo_md.png") no-repeat center;
     background-size: contain;
 }
 
@@ -130,23 +130,23 @@ nav a{
 }
 
 #club-image-1{
-    background: url("./resc/img/live2.jpg") no-repeat center;
+    background: url("../resc/img/live2.jpg") no-repeat center;
     background-size: cover;
     height: 200px;
     min-width: 300px;
 
 }
 
 #club-image-2{
-    background: url("./resc/img/live.jpg") no-repeat center;
+    background: url("../resc/img/live.jpg") no-repeat center;
     background-size: cover;
     height: 250px;
     min-width: 300px;
 
 }
 
 #club-image-3{
-    background: url("./resc/img/live3.jpg") no-repeat center;
+    background: url("../resc/img/live3.jpg") no-repeat center;
     background-size: cover;
     height: 200px;
     min-width: 300px;

webpack.config.js

@@ -1,22 +1,40 @@
 const path = require('path');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
-    entry: './src/index.scss',
+    entry: './src/app.js',
     output: {
-        path: path.resolve(__dirname, 'assets'),
-        filename: 'dist/bundle.js',
+        path: path.resolve(__dirname, 'resc'),
+        filename: 'bundle.js',
     },
     module: {
-        rules: [{
-            test: /\.scss$/,
-            use: [{
-                "style-loader",
-                "css-loader", // translate CSS into common js
-                "sass-loader" // compiles sass to css
-
-            }]
-        }]
-    }
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [ 
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            publicPath: '../',
+                            useRelativePaths: true
+                        }
+                    },
+                    'css-loader',
+                    'sass-loader'
+                ]
+            },
+            { 
+                test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, 
+                use: { loader: 'url-loader', }, 
+            }
+        ]
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            path: path.resolve(__dirname, 'resc'),
+            filename: 'styles.css'
+        })
+      ]
 };