feat: add Sass support

postlight · Dec 27, 2017 · ed36ea1 · ed36ea1
1 parent e00c60c
commit ed36ea1
Show file tree

Hide file tree

Showing 7 changed files with 2,073 additions and 353 deletions.
diff --git a/frontend/components/Header.js b/frontend/components/Header.js
@@ -3,6 +3,7 @@ import Link from "next/link";
 import Head from "next/head";
 import Menu from "./Menu.js";
 import { Config } from "../config.js";
+import stylesheet from '../src/styles/style.scss'
 
 class Header extends Component {
     constructor() {
@@ -14,6 +15,7 @@ class Header extends Component {
         return (
             <div>
                 <Head>
+                    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
                     <meta
                         name="viewport"
                         content="width=device-width, initial-scale=1"
@@ -23,15 +25,6 @@ class Header extends Component {
                         WordPress + React Starter Kit Frontend by Postlight
                     </title>
                 </Head>
-                <style jsx global>{`
-                    body {
-                        padding: 0;
-                        margin: 0;
-                        background: #fff;
-                        font: 14px helvetica;
-                        color: #000;
-                    }
-                `}</style>
             </div>
         );
     }

diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -0,0 +1,36 @@
+const path = require('path')
+const glob = require('glob')
+
+module.exports = {
+  webpack: (config, { dev }) => {
+    config.module.rules.push(
+      {
+        test: /\.(css|scss)/,
+        loader: 'emit-file-loader',
+        options: {
+          name: 'dist/[path][name].[ext]'
+        }
+      }
+    ,
+      {
+        test: /\.css$/,
+        use: ['babel-loader', 'raw-loader', 'postcss-loader']
+      }
+    ,
+      {
+        test: /\.s(a|c)ss$/,
+        use: ['babel-loader', 'raw-loader', 'postcss-loader',
+          { loader: 'sass-loader',
+            options: {
+              includePaths: ['styles', 'node_modules']
+                .map((d) => path.join(__dirname, d))
+                .map((g) => glob.sync(g))
+                .reduce((a, c) => a.concat(c), [])
+            }
+          }
+        ]
+      }
+    )
+    return config
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,8 +22,21 @@
     "dependencies": {
         "express": "^4.16.2",
         "isomorphic-unfetch": "^2.0.0",
-        "next": "^3.2.2",
-        "react": "^15.6.1",
-        "react-dom": "^15.6.1"
+        "next": "latest",
+        "react": "^16.0.0"
+    },
+    "devDependencies": {
+        "autoprefixer": "7.1.5",
+        "babel-plugin-module-resolver": "^2.7.1",
+        "babel-plugin-wrap-in-js": "^1.1.0",
+        "glob": "^7.1.2",
+        "node-sass": "^4.4.0",
+        "normalize.css": "^7.0.0",
+        "postcss-easy-import": "^3.0.0",
+        "postcss-loader": "^2.0.7",
+        "raw-loader": "^0.5.1",
+        "react-dom": "^16.2.0",
+        "sass-loader": "^6.0.6",
+        "webpack": "^3.10.0"
     }
 }
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('postcss-easy-import')({prefix: '_'}), // keep this first
+    require('autoprefixer')({ /* ...options */ }) // so imports are auto-prefixed too
+  ]
+}
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
@@ -0,0 +1,10 @@
+@import 'theme-colors';
+$theme-font: verdana, sans-serif;
+
+body {
+  font: $theme-font;
+  background-color: $themeColor-Light;
+  h1, h2 {
+      color: $themeColor-Dark
+  }
+}
diff --git a/frontend/src/styles/theme-colors.scss b/frontend/src/styles/theme-colors.scss
@@ -0,0 +1,2 @@
+$themeColor-Light: #fff;
+$themeColor-Dark: #000;