Add support for scss files in both dev & prod environments

packages/react-scripts/config/botifyConfig.js

@@ -1,6 +1,40 @@
 'use strict';
 
+const autoprefixer = require('autoprefixer');
+
+const postCssOptions = {
+  // Necessary for external CSS imports to work
+  // https://github.com/facebookincubator/create-react-app/issues/2677
+  ident: 'postcss',
+  plugins: () => [
+    require('postcss-flexbugs-fixes'),
+    autoprefixer({
+      browsers: [
+        '>1%',
+        'last 4 versions',
+        'Firefox ESR',
+        'not ie < 9', // React doesn't support IE8 anyway
+      ],
+      flexbox: 'no-2009',
+    }),
+  ],
+};
+
 module.exports = {
   babelPresets: [require.resolve('babel-preset-stage-0')],
   babelPlugins: [require.resolve('babel-plugin-transform-decorators-legacy')],
+  webpackLoaders: [
+    {
+      test: /\.scss$/,
+      loaders: [
+        require.resolve('style-loader'),
+        require.resolve('css-loader'),
+        {
+          loader: require.resolve('postcss-loader'),
+          options: postCssOptions,
+        },
+        require.resolve('sass-loader'),
+      ],
+    },
+  ],
 };

packages/react-scripts/config/webpack.config.dev.js

@@ -184,6 +184,7 @@ module.exports = {
               cacheDirectory: true,
             },
           },
+          ...botifyConfig.webpackLoaders,
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
           // "style" loader turns CSS into JS modules that inject <style> tags.

packages/react-scripts/config/webpack.config.prod.js

@@ -186,6 +186,7 @@ module.exports = {
               compact: true,
             },
           },
+          ...botifyConfig.webpackLoaders,
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.