Remove sass in favour of postcss

package.json

@@ -47,10 +47,10 @@
  "html-webpack-harddisk-plugin": "0.0.2",
  "html-webpack-plugin": "~2.22.0",
  "html-webpack-template": "~5.1.1",
- "node-sass": "~3.10.0",
+ "postcss-import": "~8.1.2",
  "postcss-loader": "~0.13.0",
+ "precss": "~1.4.0",
  "react-hot-loader": "~3.0.0-beta.1",
- "sass-loader": "~4.0.2",
  "shorthand-loader": "~1.0.0",
  "standard": "~8.0.0",
  "style-loader": "~0.13.1",

src/app/Layout/index.js

@@ -2,9 +2,9 @@ import React from 'react'
 
 export default function Layout ({ children }) {
  return (
- <section class='mw5 mw7-ns mt6 center bg-light-gray pa3 ph5-ns'>
- <h1 class='mt0 f3 tc'>Tachyons</h1>
- <p class='f5 tc lh-copy'>
+ <section className='mw5 mw7-ns mt6 center bg-light-gray pa3 ph5-ns'>
+ <h1 className='mt0 f3 tc'>React Boilerplatinum</h1>
+ <p className='f5 tc lh-copy'>
  <h1>Hello, world!</h1>
  {children}
  </p>

src/app/index.scss

@@ -1 +1 @@
-@import '~tachyons/src/tachyons';
+@import 'tachyons/src/tachyons';

webpack.dev.config.js

@@ -3,7 +3,6 @@
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const autoprefixer = require('autoprefixer')
 const config = require('./config.json')
 const webpack = require('webpack')
 const path = require('path')
@@ -61,8 +60,12 @@ module.exports = {
  include: path.resolve('src/app')
  }, {
  test: /(\.scss|\.css)$/,
- loader: 'style!css!postcss!sass'
+ loader: 'style!css!postcss'
  }]
  },
- postcss: [autoprefixer]
+ postcss: [
+ require('postcss-import'),
+ require('precss'),
+ require('autoprefixer')
+ ]
 }