add bulma and sass compilation

on production builds, create a root style.css file

server/config/webpack.base.js

@@ -11,13 +11,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          // vue-loader options go here
-        },
-      },
       {
         test: /\.js$/,
         loader: 'babel-loader',

server/config/webpack.dev.js

@@ -9,6 +9,19 @@ const ROOT = path.resolve(__dirname, '..', '..');
 
 module.exports = merge(baseConfig, {
   entry: ['webpack-hot-middleware/client'],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
+          },
+        },
+      },
+    ],
+  },
   plugins: [
     // http://vue-loader.vuejs.org/en/workflow/production.html
     new webpack.DefinePlugin({

server/config/webpack.prod.js

@@ -2,6 +2,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const merge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const baseConfig = require('./webpack.base');
@@ -14,6 +15,22 @@ module.exports = merge(baseConfig, {
   },
   // add sourcemaps to production build
   devtool: '#source-map',
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            sass: ExtractTextPlugin.extract({
+              loader: 'css-loader!sass-loader?indentedSyntax',
+              fallbackLoader: 'vue-style-loader',
+            }),
+          },
+        },
+      },
+    ],
+  },
   plugins: [
     // http://vue-loader.vuejs.org/en/workflow/production.html
     new webpack.DefinePlugin({
@@ -27,6 +44,9 @@ module.exports = merge(baseConfig, {
       debug: false,
     }),
 
+    // extract css into its own file
+    new ExtractTextPlugin(path.join('css', 'style.[contenthash].css')),
+
     // let webpack generate all your favicons and icons for you
     // https://github.com/jantimon/favicons-webpack-plugin
     new FaviconsWebpackPlugin({