svelte-pokedex: fix style imports

paulcpk · paulcpk · commit 64aba18a924e · 2022-09-13T10:12:38.000+04:00
diff --git a/pokedex-app/README.md b/pokedex-app/README.md
@@ -87,11 +87,12 @@ Breakdown:
 
 I highly anticipate the process here, as this framework gets a decent amount of hype, but I've only worked with it rudimentarily.
 
-I'm having trouble figuring out where and how to import my styles. Still no clue after 30m+ of searching. They changed the bundler to Vite a couple of months back, changind the workflow entirely.
+I'm having trouble figuring out where and how to import my global stylesheet. Still no clue after 30m+ of searching. They changed the bundler to Vite a couple of months back, changind the workflow entirely. Seems like the proper way is to import it via the top level `+layout.svelte` file. Feels a bit odd to me.
 
-Time to implement: ~ 0.5h
+
+Time to implement: ~ 1h
 
 Breakdown:
-- App Setup and UI: 0.5h
+- App Setup and UI: 1h
 - Testing Setup: 0h
 - CI/CD: 0h
diff --git a/pokedex-app/svelte-pokedex/src/app.html b/pokedex-app/svelte-pokedex/src/app.html
@@ -3,7 +3,6 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="icon" href="%sveltekit.base%/src/app.css" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
diff --git a/pokedex-app/svelte-pokedex/src/components/Navigation.svelte b/pokedex-app/svelte-pokedex/src/components/Navigation.svelte
@@ -1,12 +1,12 @@
-<nav className="navigation container">
-	<div className="logo">
-		<a className="" href="/">
+<nav class="navigation container">
+	<div class="logo">
+		<a class="" href="/">
 			<img alt="Pokedex App" src="/images/pokedex-logo.png" width="120" />
 		</a>
 	</div>
 
-	<div className="nav-items">
-		<a href="/" className="button is-ghost">Home</a>
-		<a href="/about" className="button is-ghost">About</a>
+	<div class="nav-items">
+		<a href="/" class="button is-ghost">Home</a>
+		<a href="/about" class="button is-ghost">About</a>
 	</div>
 </nav>
diff --git a/pokedex-app/svelte-pokedex/src/routes/+layout.svelte b/pokedex-app/svelte-pokedex/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
-	import 'bulma/css/bulma.min.css';
+	import '~/bulma/css/bulma.min.css';
+	import '@/app.css';
 	import Navigation from '../components/Navigation.svelte';
 	import Footer from '../components/Footer.svelte';
 </script>
diff --git a/pokedex-app/svelte-pokedex/vite.config.js b/pokedex-app/svelte-pokedex/vite.config.js
@@ -6,7 +6,8 @@ const config = {
 	plugins: [sveltekit()],
 	resolve: {
 		alias: {
-			bulma: path.resolve(__dirname, 'node_modules/bulma'),
+			'@': path.resolve(__dirname, 'src'),
+			'~': path.resolve(__dirname, 'node_modules'),
 		}
 	},
 	server: {
