Sass/css webpack loader

package.json

@@ -35,11 +35,17 @@
   },
   "homepage": "https://github.com/plangrid/react-file-viewer#readme",
   "devDependencies": {
+    "autoprefixer": "^7.1.0",
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.1",
     "html-webpack-plugin": "^2.28.0",
+    "node-sass": "^4.5.3",
+    "postcss-loader": "^2.0.5",
+    "sass-loader": "^6.0.5",
+    "style-loader": "^0.17.0",
     "webpack": "^2.5.1",
     "webpack-dev-server": "^2.4.5"
   },

src/app.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import FileViewer from './components/file-viewer.jsx';
+import "styles/main.scss";
 
 ReactDOM.render(
   <FileViewer fileType="csv"
               filePath="http://spatialkeydocs.s3.amazonaws.com/FL_insurance_sample.csv"/>,
   document.getElementById('app')
-);
+);

src/styles/main.scss

@@ -0,0 +1,3 @@
+body {
+  color: red;
+}

webpack.config.dev.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const webpack = require("webpack");
+const autoprefixer = require("autoprefixer");
 
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
@@ -34,6 +35,35 @@ module.exports = {
           cacheDirectory: true,
         },
       },
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          {
+            loader: "style-loader",
+          },
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              ident: "postcss",
+              plugins: () => [
+                autoprefixer({
+                  browsers: [
+                    ">1%",
+                    "last 4 versions",
+                    "not ie < 9",
+                  ],
+                }),
+              ],
+            },
+          },
+          {
+            loader: "sass-loader",
+          },
+        ],
+      },
     ],
   },
 

webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const path = require('path');
+const autoprefixer = require("autoprefixer");
 
 var BUILD_DIR = path.resolve(__dirname, './dist');
 var APP_DIR = path.resolve(__dirname, './src');
@@ -11,15 +12,50 @@ var config = {
     filename: 'app.js'
   },
   resolve: {
+    modules: [path.resolve(__dirname, "./src"), "node_modules"],
     extensions: ['.js', '.jsx', '.json'],
   },
   module: {
-    loaders: [
-      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
-      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
-      { test: /\.html$/, loader: "file?name=[name].[ext]" },
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        include: path.resolve(__dirname, "./src"),
+        loader: "babel-loader",
+        options: {
+          cacheDirectory: true,
+        },
+      },
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          {
+            loader: "style-loader",
+          },
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              ident: "postcss",
+              plugins: () => [
+                autoprefixer({
+                  browsers: [
+                    ">1%",
+                    "last 4 versions",
+                    "not ie < 9",
+                  ],
+                }),
+              ],
+            },
+          },
+          {
+            loader: "sass-loader",
+          },
+        ],
+      },
     ],
   },
 };
 
-module.exports = config;
+module.exports = config;