Switch to scss

gatsby-config.js

@@ -4,6 +4,7 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-react-helmet',
+    'gatsby-plugin-sass',
     {
       resolve: 'gatsby-source-filesystem',
       options: {

gatsby-node.js

@@ -4,17 +4,6 @@ const { createFilePath } = require('gatsby-source-filesystem')
 const cssnext = require('postcss-cssnext');
 const cssimport = require('postcss-import');
 
-exports.modifyWebpackConfig = ({ config }) => {
-  config.merge({
-    postcss: [
-      cssimport(),
-      cssnext(),
-    ],
-  });
-
-  return config;
-};
-
 exports.createPages = ({ boundActionCreators, graphql }) => {
   const { createPage } = boundActionCreators
 

package.json

@@ -8,6 +8,7 @@
     "gatsby-link": "^1.6.40",
     "gatsby-plugin-netlify-cms": "^2.0.1",
     "gatsby-plugin-react-helmet": "^2.0.10",
+    "gatsby-plugin-sass": "^1.0.26",
     "gatsby-plugin-sharp": "^1.6.42",
     "gatsby-remark-images": "^1.5.61",
     "gatsby-source-filesystem": "^1.5.33",

src/components/Header/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Navbar from '../Navbar'
 import Box from '../Box'
 import bananaBg from '../../img/bananaBg.png'
-import './style.css'
+import './style.scss'
 
 function Header({ imageSrc }) {
   return (

src/components/Header/style.css → src/components/Header/style.scss

@@ -1,9 +1,9 @@
-@import '../../style/colors.css';
+@import '../../style/colors';
 
 .header {
   background-size: cover;
   background-position: center center;
-  color: var(--color-white);
+  color: $color-white;
 }
 
 .header:after {

src/components/Navbar/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Link from 'gatsby-link'
-import './style.css'
+import './style.scss'
 
 function Navbar() {
   return (

src/components/Navbar/style.css → src/components/Navbar/style.scss

@@ -1,9 +1,9 @@
-@import '../../style/colors.css';
+@import '../../style/colors';
 
 .nav__item {
   text-transform: uppercase;
   text-decoration: none;
-  color: var(--color-white);
+  color: $color-white;
 }
 
 .nav__item:hover,

src/layouts/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
-import '../style/main.css'
+import '../style/main.scss'
 
 const TemplateWrapper = ({ children, data }) => (
   <div>

src/style/_colors.scss

@@ -0,0 +1,2 @@
+$color-white: #fff;
+$color-black: #000;

src/style/_variables.scss

@@ -0,0 +1,2 @@
+$font-primary: 'Lato', sans-serif;
+$font-secondary: 'Gaegu', cursive;

src/style/main.scss

@@ -0,0 +1,15 @@
+@import 'colors';
+@import 'variables';
+
+@import url('https://fonts.googleapis.com/css?family=Gaegu:700|Lato');
+@import '~normalize.css/normalize.css';
+@import '~basscss/css/basscss.css';
+
+*,
+.font-primary {
+  font-family: $font-primary;
+}
+
+.font-secondary {
+  font-family: $font-secondary;
+}

src/templates/about-page.template/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Box from '../../components/Box'
 import blueOrangeImg from '../../img/orangeBg.png'
 import Header from '../../components/Header'
-import './style.css'
+import './style.scss'
 
 function AboutPage({ data }) {
   return (