Extract css rules into one main css file (only for prod env)

packages/react-scripts/config/botifyConfig.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const autoprefixer = require('autoprefixer');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const postCssOptions = {
   // Necessary for external CSS imports to work
@@ -20,21 +21,37 @@ const postCssOptions = {
   ],
 };
 
-module.exports = {
-  babelPresets: [require.resolve('babel-preset-stage-0')],
-  babelPlugins: [require.resolve('babel-plugin-transform-decorators-legacy')],
-  webpackLoaders: [
+const getSCSSLoaderConfig = isDev => {
+  const loaders = [
     {
-      test: /\.scss$/,
-      loaders: [
-        require.resolve('style-loader'),
-        require.resolve('css-loader'),
-        {
-          loader: require.resolve('postcss-loader'),
-          options: postCssOptions,
-        },
-        require.resolve('sass-loader'),
-      ],
+      loader: require.resolve('css-loader'),
+      options: Object.assign({}, { minimize: !isDev }, { importLoaders: 1 }),
     },
-  ],
+    {
+      loader: require.resolve('postcss-loader'),
+      options: postCssOptions,
+    },
+    require.resolve('sass-loader'),
+  ];
+
+  if (isDev) {
+    return {
+      test: /\.scss$/,
+      use: [require.resolve('style-loader'), ...loaders],
+    };
+  }
+
+  return {
+    test: /\.scss$/,
+    loader: ExtractTextPlugin.extract({
+      fallback: require.resolve('style-loader'),
+      use: loaders,
+    }),
+  };
 };
+
+module.exports = (isDev = true) => ({
+  babelPresets: [require.resolve('babel-preset-stage-0')],
+  babelPlugins: [require.resolve('babel-plugin-transform-decorators-legacy')],
+  webpackLoaders: [getSCSSLoaderConfig(isDev)],
+});

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

@@ -21,8 +21,8 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
-const botifyConfig = require('./botifyConfig');
-
+const getBotifyConfig = require('./botifyConfig');
+const botifyConfig = getBotifyConfig();
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
 const publicPath = '/';

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

@@ -22,7 +22,8 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
-const botifyConfig = require('./botifyConfig');
+const getBotifyConfig = require('./botifyConfig');
+const botifyConfig = getBotifyConfig(false);
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.