Include the scss in the vue component

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>

apps/updatenotification/css/admin.scss

@@ -1,53 +0,0 @@
-#updatenotification {
-	margin-top: -25px;
-	div.update,
-	p:not(.inlineblock) {
-		margin-bottom: 25px;
-	}
-	h2.inlineblock {
-		margin-top: 25px;
-	}
-	h3 {
-		cursor: pointer;
-		.icon {
-			cursor: pointer;
-		}
-		&:first-of-type {
-			margin-top: 0;
-		}
-	}
-	.icon {
-		display: inline-block;
-		margin-bottom: -3px;
-	}
-	.icon-triangle-s, .icon-triangle-n {
-		opacity: 0.5;
-	}
-	.channel-description span {
-		color: var(--color-text-lighter);
-		strong {
-			color: var(--color-main-text);
-			font-weight: normal;
-		}
-	}
-	.warning {
-		color: var(--color-error);
-	}
-	.whatsNew {
-		display: inline-block;
-	}
-	.toggleWhatsNew {
-		position: relative;
-	}
-	.popovermenu {
-		p {
-			margin-bottom: 0;
-			width: 100%;
-		}
-		margin-top: 5px;
-		width: 300px;
-	}
-	.applist {
-		margin-bottom: 25px;
-	}
-}

apps/updatenotification/package.json

@@ -34,6 +34,9 @@
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
     "file-loader": "^3.0.1",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
     "vue-loader": "^15.5.0",
     "vue-template-compiler": "^2.5.21",
     "webpack": "^4.28.3",

apps/updatenotification/src/components/root.vue

@@ -346,3 +346,59 @@
 		}
 	}
 </script>
+
+<style lang="sass" scoped>
+	#updatenotification {
+		margin-top: -25px;
+		div.update,
+		p:not(.inlineblock) {
+			margin-bottom: 25px;
+		}
+		h2.inlineblock {
+			margin-top: 25px;
+		}
+		h3 {
+			cursor: pointer;
+			.icon {
+				cursor: pointer;
+			}
+			&:first-of-type {
+				margin-top: 0;
+			}
+		}
+		.icon {
+			display: inline-block;
+			margin-bottom: -3px;
+		}
+		.icon-triangle-s, .icon-triangle-n {
+			opacity: 0.5;
+		}
+		.channel-description span {
+			color: var(--color-text-lighter);
+			strong {
+				color: var(--color-main-text);
+				font-weight: normal;
+			}
+		}
+		.warning {
+			color: var(--color-error);
+		}
+		.whatsNew {
+			display: inline-block;
+		}
+		.toggleWhatsNew {
+			position: relative;
+		}
+		.popovermenu {
+			p {
+				margin-bottom: 0;
+				width: 100%;
+			}
+			margin-top: 5px;
+			width: 300px;
+		}
+		.applist {
+			margin-bottom: 25px;
+		}
+	}
+</style>

apps/updatenotification/templates/admin.php

@@ -9,7 +9,6 @@ declare(strict_types=1);
  * later. See the COPYING file.
  */
 script('updatenotification', 'updatenotification');
-style('updatenotification', 'admin');
 /** @var array $_ */
 ?>
 <div id="updatenotification" data-json="<?php p($_['json']); ?>"></div>

apps/updatenotification/webpack.common.js

@@ -18,6 +18,10 @@ module.exports = {
 				test: /\.js$/,
 				loader: 'babel-loader',
 				exclude: /node_modules/
+			},
+			{
+				test: /\.s[a|c]ss$/,
+				loader: 'style-loader!css-loader!sass-loader'
 			}
 		]
 	},