Generate CSS files for production builds

webpack.config.js

 const path = require('path')
 const webpack = require('webpack')
-const { merge } = require('webpack-merge')
+const { mergeWithRules } = require('webpack-merge')
 const { VueLoaderPlugin } = require('vue-loader')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
@@ -151,6 +151,19 @@ const production = {
     ]
   },
 
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+
   plugins: [
     // Remove previous build
     new CleanWebpackPlugin(),
@@ -197,6 +210,19 @@ const surge = {
     ]
   },
 
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+
   plugins: [
     new webpack.EnvironmentPlugin({
       // Use API Url provided by environment on surge
@@ -215,6 +241,21 @@ const surge = {
   ]
 }
 
+/**
+ * Custom webpack merging that allows overriding a single rule
+ * without overriding all of module.rules.
+ * The correct rule to update will be matched using its `test` field
+ * and the `use` field will be replaced by whatever is set in the overrides.
+ */
+const merge = mergeWithRules({
+  module: {
+    rules: {
+      test: 'match',
+      use: 'replace'
+    }
+  }
+})
+
 module.exports = (env, args) => {
   // webpack-cli only supports these 2 modes !
   if (args.mode === 'production') {