From 9ed4f1dbd9c6b0f711665cfb8b7ddc6257b7bcca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 12 Nov 2024 14:05:59 +0100
Subject: [PATCH] refactor: import using style src over @import

---
 apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte        | 4 +---
 apps/website/src/components/atoms/Button/Button.svelte        | 4 +---
 .../website/src/components/atoms/ButtonCart/ButtonCart.svelte | 4 +---
 .../src/components/atoms/ButtonCircle/ButtonCircle.svelte     | 4 +---
 apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte  | 4 +---
 .../src/components/layouts/PosterLayout/PosterLayout.svelte   | 4 +---
 .../website/src/components/molecules/CartItem/CartItem.svelte | 4 +---
 .../src/components/molecules/EmailForm/EmailForm.svelte       | 4 +---
 apps/website/src/components/molecules/Heading/Heading.svelte  | 4 +---
 apps/website/src/components/molecules/House/House.svelte      | 4 +---
 .../website/src/components/molecules/Location/Location.svelte | 4 +---
 .../molecules/NewsletterIssue/NewsletterIssue.svelte          | 4 +---
 .../molecules/NotificationCart/NotificationCart.svelte        | 4 +---
 .../src/components/molecules/Pagination/Pagination.svelte     | 4 +---
 .../src/components/molecules/PhotoCard/PhotoCard.svelte       | 4 +---
 .../website/src/components/molecules/PostCard/PostCard.svelte | 4 +---
 apps/website/src/components/molecules/Poster/Poster.svelte    | 4 +---
 .../src/components/molecules/ProcessStep/ProcessStep.svelte   | 4 +---
 .../ShopLocationSwitcher/ShopLocationSwitcher.svelte          | 4 +---
 .../website/src/components/molecules/Switcher/Switcher.svelte | 4 +---
 apps/website/src/components/molecules/Toast/Toast.svelte      | 4 +---
 apps/website/src/components/organisms/Banner/Banner.svelte    | 4 +---
 .../website/src/components/organisms/Carousel/Carousel.svelte | 4 +---
 apps/website/src/components/organisms/Cart/Cart.svelte        | 4 +---
 apps/website/src/components/organisms/Collage/Collage.svelte  | 4 +---
 apps/website/src/components/organisms/Footer/Footer.svelte    | 4 +---
 .../organisms/InteractiveGlobe/InteractiveGlobe.svelte        | 4 +---
 .../src/components/organisms/Locations/Locations.svelte       | 4 +---
 .../organisms/NewsletterModule/NewsletterModule.svelte        | 4 +---
 .../src/components/organisms/PostersGrid/PostersGrid.svelte   | 4 +---
 .../src/components/organisms/ShopBanner/ShopBanner.svelte     | 4 +---
 .../src/components/organisms/ShopModule/ShopModule.svelte     | 4 +---
 apps/website/src/routes/(shop)/shop/+layout.svelte            | 4 +---
 .../src/routes/(site)/[country]/[location]/+page.svelte       | 4 +---
 .../routes/(site)/[country]/[location]/[photo]/+page.svelte   | 4 +---
 apps/website/src/routes/(site)/about/+page.svelte             | 4 +---
 apps/website/src/routes/(site)/credits/+page.svelte           | 4 +---
 apps/website/src/routes/(site)/locations/+page.svelte         | 4 +---
 apps/website/src/routes/(site)/photos/+page.svelte            | 4 +---
 apps/website/src/routes/(site)/subscribe/+page.svelte         | 4 +---
 apps/website/src/routes/(site)/terms/+page.svelte             | 4 +---
 apps/website/src/routes/+error.svelte                         | 4 +---
 apps/website/src/routes/+page.svelte                          | 4 +---
 43 files changed, 43 insertions(+), 129 deletions(-)

diff --git a/apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte b/apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte
index e5bd596..10f8ce8 100644
--- a/apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte
+++ b/apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./BoxCTA";
-</style>
+<style lang="scss" src="./BoxCTA.scss"></style>
 
 <script lang="ts">
     import Icon from '$components/atoms/Icon.svelte'
diff --git a/apps/website/src/components/atoms/Button/Button.svelte b/apps/website/src/components/atoms/Button/Button.svelte
index 834e8d6..bae9456 100644
--- a/apps/website/src/components/atoms/Button/Button.svelte
+++ b/apps/website/src/components/atoms/Button/Button.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Button";
-</style>
+<style lang="scss" src="./Button.scss"></style>
 
 <script lang="ts">
     import { cx } from 'classix'
diff --git a/apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte b/apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte
index 49696e8..066d614 100644
--- a/apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte
+++ b/apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./ButtonCart";
-</style>
+<style lang="scss" src="./ButtonCart.scss"></style>
 
 <script lang="ts">
     import { scale } from 'svelte/transition'
diff --git a/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte b/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte
index 72c9870..e2b07e1 100644
--- a/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte
+++ b/apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./ButtonCircle";
-</style>
+<style lang="scss" src="./ButtonCircle.scss"></style>
 
 <script lang="ts">
     import { cx } from 'classix'
diff --git a/apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte b/apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte
index fbf8aab..aa623a2 100644
--- a/apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte
+++ b/apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./SiteTitle";
-</style>
+<style lang="scss" src="./SiteTitle.scss"></style>
 
 <script lang="ts">
     import SplitText from '$components/SplitText.svelte'
diff --git a/apps/website/src/components/layouts/PosterLayout/PosterLayout.svelte b/apps/website/src/components/layouts/PosterLayout/PosterLayout.svelte
index a71755b..e6eca3c 100644
--- a/apps/website/src/components/layouts/PosterLayout/PosterLayout.svelte
+++ b/apps/website/src/components/layouts/PosterLayout/PosterLayout.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./PosterLayout";
-</style>
+<style lang="scss" src="./PosterLayout.scss"></style>
 
 <script lang="ts">
     import { addToCart } from '$utils/functions/shop'
diff --git a/apps/website/src/components/molecules/CartItem/CartItem.svelte b/apps/website/src/components/molecules/CartItem/CartItem.svelte
index 73a6ced..8e93d3f 100644
--- a/apps/website/src/components/molecules/CartItem/CartItem.svelte
+++ b/apps/website/src/components/molecules/CartItem/CartItem.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./CartItem";
-</style>
+<style lang="scss" src="./CartItem.scss"></style>
 
 <script lang="ts">
     import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
diff --git a/apps/website/src/components/molecules/EmailForm/EmailForm.svelte b/apps/website/src/components/molecules/EmailForm/EmailForm.svelte
index 694bd54..e6cc772 100644
--- a/apps/website/src/components/molecules/EmailForm/EmailForm.svelte
+++ b/apps/website/src/components/molecules/EmailForm/EmailForm.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./EmailForm";
-</style>
+<style lang="scss" src="./EmailForm.scss"></style>
 
 <script lang="ts">
     import { fly } from 'svelte/transition'
diff --git a/apps/website/src/components/molecules/Heading/Heading.svelte b/apps/website/src/components/molecules/Heading/Heading.svelte
index 2b3cee3..0543fca 100644
--- a/apps/website/src/components/molecules/Heading/Heading.svelte
+++ b/apps/website/src/components/molecules/Heading/Heading.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Heading";
-</style>
+<style lang="scss" src="./Heading.scss"></style>
 
 <script lang="ts">
     import SiteTitle from '$components/atoms/SiteTitle/SiteTitle.svelte'
diff --git a/apps/website/src/components/molecules/House/House.svelte b/apps/website/src/components/molecules/House/House.svelte
index b0d6dfe..1965af2 100644
--- a/apps/website/src/components/molecules/House/House.svelte
+++ b/apps/website/src/components/molecules/House/House.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./House";
-</style>
+<style lang="scss" src="./House.scss"></style>
 
 <script lang="ts">
     import dayjs from 'dayjs'
diff --git a/apps/website/src/components/molecules/Location/Location.svelte b/apps/website/src/components/molecules/Location/Location.svelte
index 90b9263..4968a12 100644
--- a/apps/website/src/components/molecules/Location/Location.svelte
+++ b/apps/website/src/components/molecules/Location/Location.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Location";
-</style>
+<style lang="scss" src="./Location.scss"></style>
 
 <script lang="ts">
     import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
diff --git a/apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte b/apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte
index 5d90128..18e235a 100644
--- a/apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte
+++ b/apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./NewsletterIssue";
-</style>
+<style lang="scss" src="./NewsletterIssue.scss"></style>
 
 <script lang="ts">
     import dayjs from 'dayjs'
diff --git a/apps/website/src/components/molecules/NotificationCart/NotificationCart.svelte b/apps/website/src/components/molecules/NotificationCart/NotificationCart.svelte
index af9e6ac..7eeb82f 100644
--- a/apps/website/src/components/molecules/NotificationCart/NotificationCart.svelte
+++ b/apps/website/src/components/molecules/NotificationCart/NotificationCart.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./NotificationCart";
-</style>
+<style lang="scss" src="./NotificationCart.scss"></style>
 
 <script lang="ts">
     import { fly } from 'svelte/transition'
diff --git a/apps/website/src/components/molecules/Pagination/Pagination.svelte b/apps/website/src/components/molecules/Pagination/Pagination.svelte
index a378156..ede77a3 100644
--- a/apps/website/src/components/molecules/Pagination/Pagination.svelte
+++ b/apps/website/src/components/molecules/Pagination/Pagination.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Pagination";
-</style>
+<style lang="scss" src="./Pagination.scss"></style>
 
 <script lang="ts">
     let {
diff --git a/apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte b/apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte
index ca95c06..d292417 100644
--- a/apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte
+++ b/apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./PhotoCard";
-</style>
+<style lang="scss" src="./PhotoCard.scss"></style>
 
 <script lang="ts">
     import Image from '$components/atoms/Image.svelte'
diff --git a/apps/website/src/components/molecules/PostCard/PostCard.svelte b/apps/website/src/components/molecules/PostCard/PostCard.svelte
index ee6f18e..f8c7b45 100644
--- a/apps/website/src/components/molecules/PostCard/PostCard.svelte
+++ b/apps/website/src/components/molecules/PostCard/PostCard.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./PostCard";
-</style>
+<style lang="scss" src="./PostCard.scss"></style>
 
 <script lang="ts">
     import { cx } from 'classix'
diff --git a/apps/website/src/components/molecules/Poster/Poster.svelte b/apps/website/src/components/molecules/Poster/Poster.svelte
index 1f0b7de..7082faf 100644
--- a/apps/website/src/components/molecules/Poster/Poster.svelte
+++ b/apps/website/src/components/molecules/Poster/Poster.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Poster";
-</style>
+<style lang="scss" src="./Poster.scss"></style>
 
 <script lang="ts">
     import { addToCart } from '$utils/functions/shop'
diff --git a/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte b/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte
index 41b1a4e..f0ab5a5 100644
--- a/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte
+++ b/apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./ProcessStep";
-</style>
+<style lang="scss" src="./ProcessStep.scss"></style>
 
 <script lang="ts">
     import { scale } from 'svelte/transition'
diff --git a/apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte b/apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte
index f5ac682..0d7b647 100644
--- a/apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte
+++ b/apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./ShopLocationSwitcher";
-</style>
+<style lang="scss" src="./ShopLocationSwitcher.scss"></style>
 
 <script lang="ts">
     import { goto } from '$app/navigation'
diff --git a/apps/website/src/components/molecules/Switcher/Switcher.svelte b/apps/website/src/components/molecules/Switcher/Switcher.svelte
index d71d33a..7ebdb44 100644
--- a/apps/website/src/components/molecules/Switcher/Switcher.svelte
+++ b/apps/website/src/components/molecules/Switcher/Switcher.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Switcher";
-</style>
+<style lang="scss" src="./Switcher.scss"></style>
 
 <script lang="ts">
     import { page } from '$app/stores'
diff --git a/apps/website/src/components/molecules/Toast/Toast.svelte b/apps/website/src/components/molecules/Toast/Toast.svelte
index b4863a7..80af17b 100644
--- a/apps/website/src/components/molecules/Toast/Toast.svelte
+++ b/apps/website/src/components/molecules/Toast/Toast.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Toast";
-</style>
+<style lang="scss" src="./Toast.scss"></style>
 
 <script lang="ts">
     import { fade, fly } from 'svelte/transition'
diff --git a/apps/website/src/components/organisms/Banner/Banner.svelte b/apps/website/src/components/organisms/Banner/Banner.svelte
index 60a67a8..75f3a7f 100644
--- a/apps/website/src/components/organisms/Banner/Banner.svelte
+++ b/apps/website/src/components/organisms/Banner/Banner.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Banner";
-</style>
+<style lang="scss" src="./Banner.scss"></style>
 
 <script lang="ts">
     // Components
diff --git a/apps/website/src/components/organisms/Carousel/Carousel.svelte b/apps/website/src/components/organisms/Carousel/Carousel.svelte
index f3eda1d..a7f6c6c 100644
--- a/apps/website/src/components/organisms/Carousel/Carousel.svelte
+++ b/apps/website/src/components/organisms/Carousel/Carousel.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Carousel";
-</style>
+<style lang="scss" src="./Carousel.scss"></style>
 
 <script lang="ts">
     import { writable } from 'svelte/store'
diff --git a/apps/website/src/components/organisms/Cart/Cart.svelte b/apps/website/src/components/organisms/Cart/Cart.svelte
index 80e65e3..86ffcee 100644
--- a/apps/website/src/components/organisms/Cart/Cart.svelte
+++ b/apps/website/src/components/organisms/Cart/Cart.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Cart";
-</style>
+<style lang="scss" src="./Cart.scss"></style>
 
 <script lang="ts">
     import { fade, fly } from 'svelte/transition'
diff --git a/apps/website/src/components/organisms/Collage/Collage.svelte b/apps/website/src/components/organisms/Collage/Collage.svelte
index 767fd2f..7a58272 100644
--- a/apps/website/src/components/organisms/Collage/Collage.svelte
+++ b/apps/website/src/components/organisms/Collage/Collage.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Collage";
-</style>
+<style lang="scss" src="./Collage.scss"></style>
 
 <script lang="ts">
     import PhotoCard from '$components/molecules/PhotoCard/PhotoCard.svelte'
diff --git a/apps/website/src/components/organisms/Footer/Footer.svelte b/apps/website/src/components/organisms/Footer/Footer.svelte
index 01f77b6..26e368f 100644
--- a/apps/website/src/components/organisms/Footer/Footer.svelte
+++ b/apps/website/src/components/organisms/Footer/Footer.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Footer";
-</style>
+<style lang="scss" src="./Footer.scss"></style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
diff --git a/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte b/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte
index d8fa2fa..747158a 100644
--- a/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte
+++ b/apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./InteractiveGlobe";
-</style>
+<style lang="scss" src="./InteractiveGlobe.scss"></style>
 
 <script lang="ts">
     import { dev } from '$app/environment'
diff --git a/apps/website/src/components/organisms/Locations/Locations.svelte b/apps/website/src/components/organisms/Locations/Locations.svelte
index 89cfbeb..604aae2 100644
--- a/apps/website/src/components/organisms/Locations/Locations.svelte
+++ b/apps/website/src/components/organisms/Locations/Locations.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./Locations";
-</style>
+<style lang="scss" src="./Locations.scss"></style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
diff --git a/apps/website/src/components/organisms/NewsletterModule/NewsletterModule.svelte b/apps/website/src/components/organisms/NewsletterModule/NewsletterModule.svelte
index 3d1f87e..c4873c1 100644
--- a/apps/website/src/components/organisms/NewsletterModule/NewsletterModule.svelte
+++ b/apps/website/src/components/organisms/NewsletterModule/NewsletterModule.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./NewsletterModule";
-</style>
+<style lang="scss" src="./NewsletterModule.scss"></style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
diff --git a/apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte b/apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte
index 9b73441..5efb6b4 100644
--- a/apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte
+++ b/apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./PostersGrid";
-</style>
+<style lang="scss" src="./PostersGrid.scss"></style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
diff --git a/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte b/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
index df5788b..5e32b92 100644
--- a/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
+++ b/apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./ShopBanner";
-</style>
+<style lang="scss" src="./ShopBanner.scss"></style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'
diff --git a/apps/website/src/components/organisms/ShopModule/ShopModule.svelte b/apps/website/src/components/organisms/ShopModule/ShopModule.svelte
index 7eee232..8b1f8d8 100644
--- a/apps/website/src/components/organisms/ShopModule/ShopModule.svelte
+++ b/apps/website/src/components/organisms/ShopModule/ShopModule.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "./ShopModule";
-</style>
+<style lang="scss" src="./ShopModule.scss"></style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
diff --git a/apps/website/src/routes/(shop)/shop/+layout.svelte b/apps/website/src/routes/(shop)/shop/+layout.svelte
index 30f64e3..a6ab07a 100644
--- a/apps/website/src/routes/(shop)/shop/+layout.svelte
+++ b/apps/website/src/routes/(shop)/shop/+layout.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../style/pages/shop";
-</style>
+<style lang="scss" src="../../../style/pages/shop.scss"></style>
 
 <script lang="ts">
     import { setContext } from 'svelte'
diff --git a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
index 6253936..61830a5 100644
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
+++ b/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../../style/pages/location";
-</style>
+<style lang="scss" src="../../../../style/pages/location.scss"></style>
 
 <script lang="ts">
     import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
diff --git a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
index 32d4542..4fe29ec 100644
--- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
+++ b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../../../style/pages/viewer";
-</style>
+<style lang="scss" src="../../../../../style/pages/viewer.scss"></style>
 
 <script lang="ts">
     import { page, navigating } from '$app/stores'
diff --git a/apps/website/src/routes/(site)/about/+page.svelte b/apps/website/src/routes/(site)/about/+page.svelte
index 6d57135..5ca9332 100644
--- a/apps/website/src/routes/(site)/about/+page.svelte
+++ b/apps/website/src/routes/(site)/about/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../style/pages/about";
-</style>
+<style lang="scss" src="../../../style/pages/about.scss"></style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'
diff --git a/apps/website/src/routes/(site)/credits/+page.svelte b/apps/website/src/routes/(site)/credits/+page.svelte
index 7e70cb6..425fcc5 100644
--- a/apps/website/src/routes/(site)/credits/+page.svelte
+++ b/apps/website/src/routes/(site)/credits/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../style/pages/credits";
-</style>
+<style lang="scss" src="../../../style/pages/credits.scss"></style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'
diff --git a/apps/website/src/routes/(site)/locations/+page.svelte b/apps/website/src/routes/(site)/locations/+page.svelte
index b3bb4cd..997608d 100644
--- a/apps/website/src/routes/(site)/locations/+page.svelte
+++ b/apps/website/src/routes/(site)/locations/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../style/pages/explore";
-</style>
+<style lang="scss" src="../../../style/pages/explore.scss"></style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
diff --git a/apps/website/src/routes/(site)/photos/+page.svelte b/apps/website/src/routes/(site)/photos/+page.svelte
index 577dfb1..6be5614 100644
--- a/apps/website/src/routes/(site)/photos/+page.svelte
+++ b/apps/website/src/routes/(site)/photos/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../style/pages/photos";
-</style>
+<style lang="scss" src="../../../style/pages/photos.scss"></style>
 
 <script lang="ts">
     import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
diff --git a/apps/website/src/routes/(site)/subscribe/+page.svelte b/apps/website/src/routes/(site)/subscribe/+page.svelte
index fd7ae50..7bef624 100644
--- a/apps/website/src/routes/(site)/subscribe/+page.svelte
+++ b/apps/website/src/routes/(site)/subscribe/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../style/pages/subscribe";
-</style>
+<style lang="scss" src="../../../style/pages/subscribe.scss"></style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'
diff --git a/apps/website/src/routes/(site)/terms/+page.svelte b/apps/website/src/routes/(site)/terms/+page.svelte
index 614e712..ffd2b9f 100644
--- a/apps/website/src/routes/(site)/terms/+page.svelte
+++ b/apps/website/src/routes/(site)/terms/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../../../style/pages/terms";
-</style>
+<style lang="scss" src="../../../style/pages/terms.scss"></style>
 
 <script lang="ts">
     import dayjs from 'dayjs'
diff --git a/apps/website/src/routes/+error.svelte b/apps/website/src/routes/+error.svelte
index 72c181c..9d86c5a 100644
--- a/apps/website/src/routes/+error.svelte
+++ b/apps/website/src/routes/+error.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../style/pages/error";
-</style>
+<style lang="scss" src="../style/pages/error.scss"></style>
 
 <script lang="ts">
     import { getContext } from 'svelte'
diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte
index bf99241..3d4a24d 100644
--- a/apps/website/src/routes/+page.svelte
+++ b/apps/website/src/routes/+page.svelte
@@ -1,6 +1,4 @@
-<style lang="scss">
-    @import "../style/pages/homepage";
-</style>
+<style lang="scss" src="../style/pages/homepage.scss"></style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'