From 23ac0fef321dca0e1977b3108e5e88084c057f1f Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Tue, 7 Jan 2020 23:09:05 +0200
Subject: [PATCH] Load styles from vue components, fix hot reload

Fixes #3615
---
 client/components/App.vue |  4 ++++
 src/plugins/dev-server.js | 13 +++++++++++++
 webpack.config.js         | 13 +++++++++----
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/client/components/App.vue b/client/components/App.vue
index 01b21705..cf1460e5 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -9,6 +9,10 @@
 	</div>
 </template>
 
+<style>
+@import "../css/style.css";
+</style>
+
 <script>
 const constants = require("../js/constants");
 import Mousetrap from "mousetrap";
diff --git a/src/plugins/dev-server.js b/src/plugins/dev-server.js
index 1da841e8..8dd4d755 100644
--- a/src/plugins/dev-server.js
+++ b/src/plugins/dev-server.js
@@ -13,6 +13,19 @@ module.exports = (app) => {
 		"webpack-hot-middleware/client?path=storage/__webpack_hmr"
 	);
 
+	// Enable hot module reload support in mini-css-extract-plugin
+	for (const rule of webpackConfig.module.rules) {
+		if (!Array.isArray(rule.use)) {
+			continue;
+		}
+
+		for (const use of rule.use) {
+			if (use.options && typeof use.options.hmr !== "undefined") {
+				use.options.hmr = true;
+			}
+		}
+	}
+
 	const compiler = webpack(webpackConfig);
 
 	app.use(
diff --git a/webpack.config.js b/webpack.config.js
index 064ce5aa..cc7ffa46 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,7 +11,6 @@ const config = {
 	mode: process.env.NODE_ENV === "production" ? "production" : "development",
 	entry: {
 		"js/bundle.js": [path.resolve(__dirname, "client/js/vue.js")],
-		"css/style": path.resolve(__dirname, "client/css/style.css"),
 	},
 	devtool: "source-map",
 	output: {
@@ -37,9 +36,13 @@ const config = {
 			},
 			{
 				test: /\.css$/,
-				include: [path.resolve(__dirname, "client")],
 				use: [
-					MiniCssExtractPlugin.loader,
+					{
+						loader: MiniCssExtractPlugin.loader,
+						options: {
+							hmr: false,
+						},
+					},
 					{
 						loader: "css-loader",
 						options: {
@@ -83,8 +86,10 @@ const config = {
 		json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
 	},
 	plugins: [
-		new MiniCssExtractPlugin(),
 		new VueLoaderPlugin(),
+		new MiniCssExtractPlugin({
+			filename: "css/style.css",
+		}),
 		new CopyPlugin([
 			{
 				from: "./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff*",