Add global scss vars

Author: thorio

errorpages/pages/_error/[id].html.vue

@@ -18,8 +18,6 @@ useSeoMeta({ title: `${errorpage?.name} - Chirality` });
 </template>
 
 <style lang="scss">
-@use "@workspace/ui-lib/scss/colors.scss";
-
 html {
 	font-family: Arial, Helvetica, sans-serif;
 	background-color: colors.$background;

home/components/TileContainer.vue

@@ -16,8 +16,6 @@ defineProps<{ tiles: Tile[]; }>();
 </template>
 
 <style lang="scss" scoped>
-@use "@workspace/ui-lib/scss/breakpoints.scss";
-
 section {
 	padding: 1em;
 	display: flex;

ui-lib/components/AppHeader.vue

@@ -32,9 +32,6 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
-@use "../scss/colors.scss";
-@use "../scss/breakpoints.scss";
-
 header {
 	position: sticky;
 	top: 0;

ui-lib/index.ts

@@ -1,5 +1,6 @@
 import { defineNuxtModule, createResolver, addComponentsDir, installModule } from "@nuxt/kit";
 import defu from "defu";
+import type { NuxtOptions, Nuxt } from "@nuxt/schema";
 
 export interface Config {
 	appName: string,
@@ -18,29 +19,56 @@ const defaults: Config = {
 	logoutUrl: "https://auth.chirality.de",
 };
 
+const scssModules = [
+	"./scss/colors.scss",
+	"./scss/breakpoints.scss"
+];
+
+const resolver = createResolver(import.meta.url);
+
 export default defineNuxtModule({
 	meta: { name: "ui-lib" },
 	defaults,
 
 	async setup(_, nuxt) {
-		const resolver = createResolver(import.meta.url);
-
 		installModule("@nuxt/eslint");
 		installModule("@nuxt/fonts");
 		installModule("@nuxt/icon");
 
 		nuxt.options.runtimeConfig.public = defu(nuxt.options.runtimeConfig.public, defaults);
-		nuxt.options.css.push(resolver.resolve("./scss/global.scss"));
 
-		nuxt.hook("nitro:config", async (nitroConfig) => {
-			(nitroConfig.publicAssets ??= []).push({
-				dir: resolver.resolve("./public"),
-				maxAge: 60 * 60 * 24 * 365, // 1 year
-			});
-		});
+		registerCss(nuxt.options);
+		registerAssets(nuxt);
 
-		await addComponentsDir({
-			path: resolver.resolve("./components"),
-		});
+		await registerComponents();
 	},
 });
+
+function registerComponents() {
+	return addComponentsDir({
+		path: resolver.resolve("./components"),
+	});
+}
+
+function registerAssets(nuxt: Nuxt) {
+	nuxt.hook("nitro:config", async (nitroConfig) => {
+		(nitroConfig.publicAssets ??= []).push({
+			dir: resolver.resolve("./public"),
+			maxAge: 60 * 60 * 24 * 365,
+		});
+	});
+}
+
+function registerCss(options: NuxtOptions) {
+	// global scss variables
+	const scssImports = scssModules
+		.map(m => resolver.resolve(m))
+		.map(m => `@use "${m}";`)
+		.join("");
+
+	options.vite = defu(options.vite, { css: { preprocessorOptions: { scss: { additionalData: scssImports, } } } });
+
+	// global styles
+	options.css.push(resolver.resolve("./scss/global.scss"));
+}
+

ui-lib/scss/global.scss

@@ -1,5 +1,3 @@
-@use "./colors.scss";
-
 html {
 	box-sizing: border-box;
 }

web/components/SocialLinks.vue

@@ -20,8 +20,6 @@ const { matrixUrl, githubUrl, printablesUrl } = useRuntimeConfig().public;
 </template>
 
 <style lang="scss">
-@use "@workspace/ui-lib/scss/colors.scss";
-
 .links {
 	font-size: 2.5em;
 	margin: 2em auto 0 auto;

web/pages/index.vue

@@ -18,8 +18,6 @@ useSeoMeta({ description: "Nothing to see here (yet)" });
 </template>
 
 <style lang="scss">
-@use "@workspace/ui-lib/scss/breakpoints.scss";
-
 .placeholder {
 	width: 32em;
 	height: 24em;