diff --git a/packages/slate-tools/cli/commands/build.js b/packages/slate-tools/cli/commands/build.js
index 433d6ff2b..d7c4586bf 100755
--- a/packages/slate-tools/cli/commands/build.js
+++ b/packages/slate-tools/cli/commands/build.js
@@ -1,3 +1,7 @@
+// Set NODE_ENV so slate.config.js can return different values for
+// production vs development builds
+process.env.NODE_ENV = 'production';
+
 /*
  * Run Webpack with the webpack.prod.conf.js configuration file. Write files to disk.
  *
diff --git a/packages/slate-tools/cli/commands/start.js b/packages/slate-tools/cli/commands/start.js
index 905b0dbd3..474ff5c9f 100644
--- a/packages/slate-tools/cli/commands/start.js
+++ b/packages/slate-tools/cli/commands/start.js
@@ -1,3 +1,7 @@
+// Set NODE_ENV so slate.config.js can return different values for
+// production vs development builds
+process.env.NODE_ENV = 'development';
+
 const argv = require('minimist')(process.argv.slice(2));
 const figures = require('figures');
 const chalk = require('chalk');
diff --git a/packages/slate-tools/slate-tools.schema.js b/packages/slate-tools/slate-tools.schema.js
index 460fb03f1..28ebdcd87 100644
--- a/packages/slate-tools/slate-tools.schema.js
+++ b/packages/slate-tools/slate-tools.schema.js
@@ -1,5 +1,7 @@
 const path = require('path');
 const os = require('os');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
 const commonPaths = require('@shopify/slate-config/common/paths.schema');
 
 module.exports = {
@@ -70,11 +72,15 @@ module.exports = {
 
   // Extends webpack development config using 'webpack-merge'
   // https://www.npmjs.com/package/webpack-merge
-  'webpack.config.extend.dev': {},
+  'webpack.extend': {},
 
-  // Extends webpack production config using 'webpack-merge'
-  // https://www.npmjs.com/package/webpack-merge
-  'webpack.config.extend.prod': {},
+  'webpack.postcss.plugins': (config) => [
+    autoprefixer,
+
+    process.env.NODE_ENV === 'production'
+      ? cssnano(config.get('webpack.cssnano.settings'))
+      : null,
+  ],
 
   // Optimization settings for the cssnano plugin
   'webpack.cssnano.settings': {zindex: false, reduceIdents: false},
diff --git a/packages/slate-tools/tools/webpack/config/__tests__/dev.test.js b/packages/slate-tools/tools/webpack/config/__tests__/dev.test.js
index 39fd9c9d5..0c16bf1b5 100644
--- a/packages/slate-tools/tools/webpack/config/__tests__/dev.test.js
+++ b/packages/slate-tools/tools/webpack/config/__tests__/dev.test.js
@@ -1,6 +1,6 @@
-test(`merges contents of 'webpack.config.extend.dev' into webpack config`, () => {
+test(`merges contents of 'webpack.extend' into webpack config`, () => {
   global.slateUserConfig = {
-    'webpack.config.extend.dev': {some: 'value'},
+    'webpack.extend': {some: 'value'},
   };
 
   jest.mock('../parts/core', () => {
@@ -18,8 +18,6 @@ test(`merges contents of 'webpack.config.extend.dev' into webpack config`, () =>
   require('../dev');
 
   expect(merge).toBeCalledWith(
-    expect.arrayContaining([
-      global.slateUserConfig['webpack.config.extend.dev'],
-    ]),
+    expect.arrayContaining([global.slateUserConfig['webpack.extend']]),
   );
 });
diff --git a/packages/slate-tools/tools/webpack/config/__tests__/prod.test.js b/packages/slate-tools/tools/webpack/config/__tests__/prod.test.js
index 0c21ec0e0..8c7ae5e3a 100644
--- a/packages/slate-tools/tools/webpack/config/__tests__/prod.test.js
+++ b/packages/slate-tools/tools/webpack/config/__tests__/prod.test.js
@@ -1,6 +1,6 @@
-test(`merges contents of 'webpack.config.extend.prod' into webpack config`, () => {
+test(`merges contents of 'webpack.extend' into webpack config`, () => {
   global.slateUserConfig = {
-    'webpack.config.extend.prod': {some: 'value'},
+    'webpack.extend': {some: 'value'},
   };
 
   jest.mock('../parts/core');
@@ -16,8 +16,6 @@ test(`merges contents of 'webpack.config.extend.prod' into webpack config`, () =
   require('../prod');
 
   expect(merge).toBeCalledWith(
-    expect.arrayContaining([
-      global.slateUserConfig['webpack.config.extend.prod'],
-    ]),
+    expect.arrayContaining([global.slateUserConfig['webpack.extend']]),
   );
 });
diff --git a/packages/slate-tools/tools/webpack/config/dev.js b/packages/slate-tools/tools/webpack/config/dev.js
index 364896e09..e42a32d8f 100755
--- a/packages/slate-tools/tools/webpack/config/dev.js
+++ b/packages/slate-tools/tools/webpack/config/dev.js
@@ -2,12 +2,13 @@ const path = require('path');
 const webpack = require('webpack');
 const merge = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const autoprefixer = require('autoprefixer');
+
 const SlateConfig = require('@shopify/slate-config');
 
 const core = require('./parts/core');
 const babel = require('./parts/babel');
 const entry = require('./parts/entry');
+const sass = require('./parts/sass');
 
 const commonExcludes = require('./utilities/common-excludes');
 const getLayoutEntrypoints = require('./utilities/get-layout-entrypoints');
@@ -26,6 +27,7 @@ module.exports = merge([
   core,
   entry,
   babel,
+  sass,
   {
     mode: 'development',
 
@@ -44,35 +46,6 @@ module.exports = merge([
             },
           ],
         },
-        {
-          test: /\.s[ac]ss$/,
-          exclude: commonExcludes(),
-          use: [
-            {
-              loader: 'style-loader',
-              options: {
-                hmr: true,
-              },
-            },
-            {
-              loader: 'css-loader',
-              // Enabling sourcemaps in styles causes style-loader to inject
-              // styles using a <link> tag instead of <style> tag. This causes
-              // a FOUC content, which can cause issues with JS that is reading
-              // the DOM for styles (width, height, visibility) on page load.
-              options: {importLoaders: 2, sourceMap: false},
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                ident: 'postcss',
-                sourceMap: false,
-                plugins: () => [autoprefixer],
-              },
-            },
-            {loader: 'sass-loader', options: {sourceMap: false}},
-          ],
-        },
       ],
     },
 
@@ -113,5 +86,5 @@ module.exports = merge([
       new HtmlWebpackIncludeLiquidStylesPlugin(),
     ],
   },
-  config.get('webpack.config.extend.dev'),
+  config.get('webpack.extend'),
 ]);
diff --git a/packages/slate-tools/tools/webpack/config/parts/__tests__/sass.prod.test.js b/packages/slate-tools/tools/webpack/config/parts/__tests__/sass.prod.test.js
deleted file mode 100644
index 4951bc05c..000000000
--- a/packages/slate-tools/tools/webpack/config/parts/__tests__/sass.prod.test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-test(`passes 'webpack.cssnano.settings' config to cssnano`, () => {
-  global.slateUserConfig = {
-    'webpack.cssnano.settings': {some: 'value'},
-  };
-
-  jest.mock('cssnano');
-
-  const cssnano = require('cssnano');
-
-  require('../sass.prod');
-
-  expect(cssnano).toBeCalledWith(
-    global.slateUserConfig['webpack.cssnano.settings'],
-  );
-});
diff --git a/packages/slate-tools/tools/webpack/config/parts/__tests__/sass.test.js b/packages/slate-tools/tools/webpack/config/parts/__tests__/sass.test.js
new file mode 100644
index 000000000..66f4fddc7
--- /dev/null
+++ b/packages/slate-tools/tools/webpack/config/parts/__tests__/sass.test.js
@@ -0,0 +1,37 @@
+beforeEach(jest.resetModules);
+
+test(`passes 'webpack.cssnano.settings' config to cssnano`, () => {
+  const oldNodeEnv = process.env.NODE_ENV;
+  process.env.NODE_ENV = 'production';
+
+  jest.mock('cssnano');
+
+  const cssnano = require('cssnano');
+  const SlateConfig = require('@shopify/slate-config');
+  const config = new SlateConfig(require('../../../../../slate-tools.schema'));
+
+  require('../sass');
+
+  expect(cssnano).toBeCalledWith(config.get('webpack.cssnano.settings'));
+
+  process.env.NODE_ENV = oldNodeEnv;
+});
+
+test(`passes 'webpack.postcss.plugins' config to PostCSS Loader`, () => {
+  const oldNodeEnv = process.env.NODE_ENV;
+  process.env.NODE_ENV = 'development';
+
+  const SlateConfig = require('@shopify/slate-config');
+  const config = new SlateConfig(require('../../../../../slate-tools.schema'));
+
+  const part = require('../sass');
+  const postcssLoader = part.module.rules[0].use.find(
+    (item) => item.loader === 'postcss-loader',
+  );
+
+  expect(postcssLoader.options.plugins).toMatchObject(
+    config.get('webpack.postcss.plugins'),
+  );
+
+  process.env.NODE_ENV = oldNodeEnv;
+});
diff --git a/packages/slate-tools/tools/webpack/config/parts/sass.js b/packages/slate-tools/tools/webpack/config/parts/sass.js
new file mode 100644
index 000000000..1f80ddb15
--- /dev/null
+++ b/packages/slate-tools/tools/webpack/config/parts/sass.js
@@ -0,0 +1,67 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const SlateConfig = require('@shopify/slate-config');
+
+const commonExcludes = require('../utilities/common-excludes');
+const config = new SlateConfig(require('../../../../slate-tools.schema'));
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+const part = {
+  module: {
+    rules: [],
+  },
+  plugins: [],
+};
+
+const sassRule = {
+  test: /\.s[ac]ss$/,
+  exclude: commonExcludes(),
+};
+
+const styleLoader = {
+  loader: 'style-loader',
+  options: {
+    hmr: isDevelopment,
+  },
+};
+
+const cssLoader = {
+  loader: 'css-loader',
+  // Enabling sourcemaps in styles when using HMR causes style-loader to inject
+  // styles using a <link> tag instead of <style> tag. This causes
+  // a FOUC content, which can cause issues with JS that is reading
+  // the DOM for styles (width, height, visibility) on page load.
+  options: {importLoaders: 2, sourceMap: !isDevelopment},
+};
+
+const postcssLoader = {
+  loader: 'postcss-loader',
+  options: {
+    ident: 'postcss',
+    sourceMap: !isDevelopment,
+    plugins: config.get('webpack.postcss.plugins'),
+  },
+};
+
+const cssVarLoader = {loader: '@shopify/slate-cssvar-loader'};
+
+const sassLoader = {loader: 'sass-loader', options: {sourceMap: false}};
+
+const extractStyles = new ExtractTextPlugin({
+  filename: '[name].css.liquid',
+  allChunks: true,
+});
+
+if (isDevelopment) {
+  sassRule.use = [styleLoader, cssLoader, postcssLoader, sassLoader];
+  part.module.rules.push(sassRule);
+} else {
+  sassRule.use = extractStyles.extract({
+    fallback: styleLoader,
+    use: [cssVarLoader, cssLoader, postcssLoader, sassLoader],
+  });
+  part.module.rules.push(sassRule);
+  part.plugins.push(extractStyles);
+}
+
+module.exports = part;
diff --git a/packages/slate-tools/tools/webpack/config/parts/sass.prod.js b/packages/slate-tools/tools/webpack/config/parts/sass.prod.js
deleted file mode 100644
index 299256088..000000000
--- a/packages/slate-tools/tools/webpack/config/parts/sass.prod.js
+++ /dev/null
@@ -1,47 +0,0 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
-const SlateConfig = require('@shopify/slate-config');
-
-const commonExcludes = require('../utilities/common-excludes');
-const config = new SlateConfig(require('../../../../slate-tools.schema'));
-
-const extractStyles = new ExtractTextPlugin({
-  filename: '[name].css.liquid',
-  allChunks: true,
-});
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.s[ac]ss$/,
-        exclude: commonExcludes(),
-        use: extractStyles.extract({
-          fallback: 'style-loader',
-          use: [
-            {loader: '@shopify/slate-cssvar-loader'},
-            {
-              loader: 'css-loader',
-              options: {importLoaders: 2, sourceMap: true},
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                ident: 'postcss',
-                sourceMap: true,
-                plugins: [
-                  autoprefixer,
-                  cssnano(config.get('webpack.cssnano.settings')),
-                ],
-              },
-            },
-            {loader: 'sass-loader', options: {sourceMap: true}},
-          ],
-        }),
-      },
-    ],
-  },
-
-  plugins: [extractStyles],
-};
diff --git a/packages/slate-tools/tools/webpack/config/prod.js b/packages/slate-tools/tools/webpack/config/prod.js
index fae05dca1..625543c94 100755
--- a/packages/slate-tools/tools/webpack/config/prod.js
+++ b/packages/slate-tools/tools/webpack/config/prod.js
@@ -10,7 +10,7 @@ const SlateLiquidAssetsPlugin = require('@shopify/html-webpack-liquid-asset-tags
 const SlateTagPlugin = require('@shopify/slate-tag-webpack-plugin');
 
 const babel = require('./parts/babel');
-const sass = require('./parts/sass.prod');
+const sass = require('./parts/sass');
 const entry = require('./parts/entry');
 const core = require('./parts/core');
 
@@ -113,5 +113,5 @@ module.exports = merge([
       },
     },
   },
-  config.get('webpack.config.extend.prod'),
+  config.get('webpack.extend'),
 ]);