Sass compiling

5 years ago · 330d5eceb4
5 changed files with 56 additions and 10 deletions
--- a/README.markdown
+++ b/README.markdown
@ -5,7 +5,7 @@ Weather Dashboard

 Install all the dependencies for the project with

-    $ npm install dev
+    $ npm install

 ## Build

--- a/dist/index.html
+++ b/dist/index.html
@ -1,10 +1,20 @@
 <!doctype html>
 <html>
  <head>
-    <title>Getting Started</title>
+    <title>Weather for Philadelphia, PA</title>
+    <link rel="stylesheet" type="text/css" href="style.css" >
  </head>
  <body>
-    <svg id="chart"></svg>
+    <div class="wrapper">
+      <header>
+        <h1 class="title">Weather for <span class="city">Philadelphia, PA</span></h1>
+      </header>
+      <svg id="chart"></svg>
+    </div>
+    <footer>
+      <p>Made by natronics in the cold industrial blocks of Philadelphia PA.</p>
+    </footer>
+
    <script src="main.js"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -16,6 +16,11 @@
    "d3-fetch": "^1.1.2"
  },
  "devDependencies": {
+    "css-loader": "^2.1.0",
+    "extract-loader": "^3.1.0",
+    "file-loader": "^3.0.1",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1"
  }
--- a/src/style.sass
+++ b/src/style.sass
@ -0,0 +1,2 @@
+body
+    background: #fc2
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,9 +1,38 @@
 const path = require('path');

-module.exports = {
-  entry: './src/index.js',
-  output: {
-    filename: 'main.js',
-    path: path.resolve(__dirname, 'dist')
-  }
-};
+module.exports = [{
+    name: 'js',
+    entry: ['./src/index.js'],
+    output: {
+        filename: 'main.js',
+        path: path.resolve(__dirname, 'dist')
+    }
+},
+{
+    name: 'css',
+    entry: ['./src/style.sass'],
+    module: {
+        rules: [
+        	{
+        		test: /\.sass$/,
+        		use: [
+        			{
+        				loader: 'file-loader',
+        				options: {
+        					name: 'style.css',
+        				}
+        			},
+        			{
+        				loader: 'extract-loader'
+        			},
+        			{
+        				loader: 'css-loader?-url'
+        			},
+        			{
+        				loader: 'sass-loader'
+        			}
+        		]
+        	}
+        ]
+    }
+}];