Using sass with node.

smerth · smerth · commit 528bfc0d38ed · 2017-06-16T11:06:25.000-07:00
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "Learning Fullstack JavaScript Development: MongoDB, Node.js, React.js",
   "main": "index.js",
   "scripts": {
+    "build:dev": "webpack",
     "start": "nodemon --exec babel-node server.js --ignore public/",
     "dev": "webpack -wd"
   },
@@ -25,13 +26,15 @@
     "express": "^4.15.3",
     "json-loader": "^0.5.4",
     "mongodb": "^2.2.28",
+    "node-sass-middleware": "0.9.8",
     "react": "^15.6.0",
     "react-dom": "^15.6.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-preset-env": "^1.5.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1 @@
+.ContestPreview{margin:1em;border:1px solid green}.ContestPreview .category-name{border-bottom:1px solid #ccc;padding:0.25em 0.5em;font-weight:bold;background-color:#eee}.ContestPreview .contest-name{padding:0.5em}
diff --git a/sass/style.scss b/sass/style.scss
@@ -0,0 +1,15 @@
+.ContestPreview {
+  margin: 1em;
+  border: 1px solid green;
+
+  .category-name {
+    border-bottom: 1px solid #ccc;
+    padding: 0.25em 0.5em;
+    font-weight: bold;
+    background-color: #eee;
+  }
+
+  .contest-name {
+    padding: 0.5em;
+  }
+}
diff --git a/server.js b/server.js
@@ -1,9 +1,20 @@
 import config from './config';
-import express from 'express';
 import apiRouter from './api';
+import express from 'express';
+import sassMiddleware from 'node-sass-middleware';
+import path from 'path';
 
 const server = express();
 
+server.use(sassMiddleware({
+  /* Options */
+  src: path.join(__dirname, 'sass'),
+  dest: path.join(__dirname, 'public'),
+  debug: 'true',
+  outputStyle: 'compressed',
+  prefix: '/static/'
+}));
+
 server.set('view engine', 'ejs');
 
 server.get('/', (req, res) => {
@@ -16,5 +27,5 @@ server.use('/api', apiRouter);
 server.use(express.static('public'));
 
 server.listen(config.port, () => {
-    console.info('Express listening on port: ' + config.port)
-});
+  console.info('Express listening on port', config.port);
+});
diff --git a/src/components/ContestPreview.js b/src/components/ContestPreview.js
@@ -3,10 +3,10 @@ import React from 'react';
 const ContestPreview = (contest) => {
   return (
     <div className="ContestPreview">
-      <div>
+      <div className="category-name">
         {contest.categoryName}
       </div>
-      <div>
+      <div className="contest-name">
         {contest.contestName}
       </div>
     </div>
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './components/App';
 import data from './testData';
+import App from './components/App';
 
 ReactDOM.render(
   <App contests={data.contests} />,
diff --git a/views/header.ejs b/views/header.ejs
@@ -6,5 +6,6 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Naming Contests</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="/style.css" media="screen">
 </head>
 <body class="container">
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
@@ -0,0 +1,36 @@
+const {resolve} = require('path');
+
+module.exports = () => {
+  return {
+    context: resolve('src'),
+    entry: './index.js',
+    output: {
+      path: resolve('public'),
+      filename: 'bundle.js'
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /(node_modules|bower_components)/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['es2015', 'react', 'stage-2']
+            }
+          }
+        },
+        {
+          test: /\.json$/,
+          exclude: /(node_modules|bower_components)/,
+          use: {
+            loader: 'json-loader',
+            options: {
+              presets: ['env']
+            }
+          }
+        }
+      ]
+    }
+  };
+};
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+.ContestPreview{margin:1em;border:1px solid green}.ContestPreview .category-name{border-bottom:1px solid #ccc;padding:0.25em 0.5em;font-weight:bold;background-color:#eee}.ContestPreview .contest-name{padding:0.5em}`