Use postcss-loader in favour of sass-loader

package.json

@@ -75,12 +75,15 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.2",
     "mocha": "^4.0.0",
-    "node-sass": "^4.1.1",
+    "postcss-automath": "^1.0.1",
+    "postcss-loader": "^2.0.10",
+    "postcss-nested": "^3.0.0",
+    "postcss-sassy-mixins": "^2.1.0",
+    "postcss-simple-vars": "^4.1.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-hot-loader": "^4.0.0-beta.15",
     "rimraf": "^2.5.4",
-    "sass-loader": "^6.0.1",
     "screenfull": "^3.0.2",
     "snazzy": "^7.0.0",
     "standard": "^10.0.0",
@@ -117,6 +120,14 @@
       }
     }
   },
+  "postcss": {
+    "plugins": {
+      "postcss-nested": {},
+      "postcss-sassy-mixins": {},
+      "postcss-simple-vars": {},
+      "postcss-automath": {}
+    }
+  },
   "standard": {
     "parser": "babel-eslint",
     "ignore": [

src/demo/App.scss → src/demo/App.css

@@ -1,17 +1,11 @@
-$black: #000;
 $column-width: 480px;
 $gutter-width: 20px;
-// $break: $column-width * 2 + $gutter-width * 3;
 
 .app {
   margin: auto;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 300;
   text-align: center;
-
-  @media screen and ($column-width * 2) {
-
-  }
 }
 
 .section {
@@ -29,11 +23,11 @@ $gutter-width: 20px;
 
 .react-player {
   margin-bottom: 10px;
-  background: rgba($black, .1);
+  background: rgba(0, 0, 0, .1);
 }
 
 .faded {
-  color: rgba($black, .5);
+  color: rgba(0, 0, 0, .5);
 }
 
 .footer {

src/demo/App.js

@@ -3,10 +3,10 @@ import { findDOMNode } from 'react-dom'
 import { hot } from 'react-hot-loader'
 import screenfull from 'screenfull'
 
-import './reset.scss'
-import './defaults.scss'
-import './App.scss'
-import './Range.scss'
+import './reset.css'
+import './defaults.css'
+import './range.css'
+import './App.css'
 
 import { version } from '../../package.json'
 import ReactPlayer from '../ReactPlayer'

src/demo/Range.scss → src/demo/range.css

@@ -1,8 +1,10 @@
+/*
 // Styling Cross-Browser Compatible Range Inputs with Sass
 // Github: https://github.com/darlanrod/input-range-sass
 // Author: Darlan Rod https://github.com/darlanrod
 // Version 1.0.1
 // MIT License
+*/
 
 $track-color: #ccc;
 $thumb-color: #666;

webpack.config.babel.js

@@ -37,11 +37,11 @@ export default {
         include: [ PATH_SRC, PATH_TESTS ]
       },
       {
-        test: /\.scss$/,
+        test: /\.css$/,
         use: styleLoader([
           'style-loader',
           'css-loader?sourceMap',
-          'sass-loader?sourceMap'
+          'postcss-loader?sourceMap'
         ]),
         include: PATH_SRC
       }