Re-add ExtractTextPlugin

client/build/webpack.base.conf.js

@@ -5,11 +5,50 @@ const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
 
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
+const styleRule = (scss) => {
+  const test = scss ? /\.scss$/ : /\.css$/;
+  let use;
+  if (scss) {
+    use = [
+      'css-loader',
+      {
+        loader: 'sass-loader',
+        options: {
+          data: process.env.THEME ? `@import "styles/themes/_${process.env.THEME}.scss";` : ''
+        }
+      }
+    ]
+  } else {
+    use = [
+      'css-loader'
+    ]
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    return {
+      test,
+      loader: ExtractTextPlugin.extract({
+        use,
+        fallback: 'vue-style-loader'
+      })
+    }
+  } else {
+    return {
+      test,
+      use: [
+        'vue-style-loader',
+        ...use
+      ]
+    }
+  }
+}
+
 const createLintingRule = () => ({
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
@@ -95,26 +134,17 @@ module.exports = {
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
       },
-      {
+      styleRule(false), // css rule
-        test: /\.css$/,
+      // {
-        use: [
+      //   test: /\.css$/,
-          'vue-style-loader',
+      //   use: [
-          'css-loader'
+      //     process.env.NODE_ENV !== 'production'
-        ]
+      //       ? 'vue-style-loader'
-      },
+      //       : MiniCssExtractPlugin.loader,
-      {
+      //     'css-loader'
-        test: /\.scss$/,
+      //   ]
-        use: [
+      // },
-          'vue-style-loader',
+      styleRule(true) // sass rule
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              data: process.env.THEME ? `@import "styles/themes/_${process.env.THEME}.scss";` : ''
-            }
-          }
-        ]
-      }
     ]
   },
   plugins: [