Sass compiling

6 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'
        			}
        		]
        	}
        ]
    }
 }];