Load styles from vue components, fix hot reload

Fixes #3615

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";

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(

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*",