Merge pull request #3684 from thelounge/richrd/style-loading

Load styles from vue components, fix hot reload

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

client/service-worker.js

@@ -78,7 +78,10 @@ async function networkOrCache(event) {
 		}
 
 		if (response.ok) {
+			if (cacheName !== "dev") {
 				event.waitUntil(putInCache(event.request, response));
+			}
+
 			return response.clone();
 		}
 

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

@@ -7,11 +7,11 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
 const Helper = require("./src/helper.js");
 
+const isProduction = process.env.NODE_ENV === "production";
 const config = {
-	mode: process.env.NODE_ENV === "production" ? "production" : "development",
+	mode: isProduction ? "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 +37,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 +87,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*",
@@ -103,7 +109,9 @@ const config = {
 				from: "./client/service-worker.js",
 				to: "[name].[ext]",
 				transform(content) {
-					return content.toString().replace("__HASH__", Helper.getVersionCacheBust());
+					return content
+						.toString()
+						.replace("__HASH__", isProduction ? Helper.getVersionCacheBust() : "dev");
 				},
 			},
 			{