diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 432352e5d..c6d3d9357 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -589,7 +589,7 @@ const isServerDisclosureOpen = ref(false)
         v-model="fsPath"
         :loading="isLoadingFs"
         :data="fsStatus"
-        @import="importFs"
+        @use="importFs"
       />
       <template v-if="fsStatus && fsStatus.import">
         <h3 class="ui header">
diff --git a/front/src/components/playlist/Card.vue b/front/src/components/playlist/Card.vue
index 983e19568..21d3cfca7 100644
--- a/front/src/components/playlist/Card.vue
+++ b/front/src/components/playlist/Card.vue
@@ -74,5 +74,5 @@ if (import.meta.env.PROD) {
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>
diff --git a/front/src/components/podcast/Card.vue b/front/src/components/podcast/Card.vue
index 2a31fb278..970ab593f 100644
--- a/front/src/components/podcast/Card.vue
+++ b/front/src/components/podcast/Card.vue
@@ -27,5 +27,5 @@ const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Dat
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>
diff --git a/front/src/components/radio/Card.vue b/front/src/components/radio/Card.vue
index f16f2957f..89930095d 100644
--- a/front/src/components/radio/Card.vue
+++ b/front/src/components/radio/Card.vue
@@ -41,5 +41,5 @@ const { radio, small, ...cardProps } = defineProps<{
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>
diff --git a/front/src/components/ui/Activity.vue b/front/src/components/ui/Activity.vue
index 3904f7a2b..ec6556294 100644
--- a/front/src/components/ui/Activity.vue
+++ b/front/src/components/ui/Activity.vue
@@ -69,5 +69,5 @@ const profileParams = computed(() => {
 </template>
 
 <style lang="scss">
-@import './activity.scss'
+@use './activity.scss'
 </style>
diff --git a/front/src/components/ui/Alert.vue b/front/src/components/ui/Alert.vue
index d17fc083a..997cba49e 100644
--- a/front/src/components/ui/Alert.vue
+++ b/front/src/components/ui/Alert.vue
@@ -32,5 +32,5 @@ const props = defineProps<Props>()
 </template>
 
 <style lang="scss">
-@import './alert.scss'
+@use './alert.scss'
 </style>
diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index 0f8efb262..2763bacea 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -156,7 +156,7 @@ const model = defineModel<string|number>({ required: true })
 </template>
 
 <style lang="scss">
-@import './input.scss';
+@use './input.scss';
 
 input[type=number]::-webkit-inner-spin-button {
     opacity: 1;
diff --git a/front/src/components/ui/Loader.vue b/front/src/components/ui/Loader.vue
index 65a5e6941..efdaf64b8 100644
--- a/front/src/components/ui/Loader.vue
+++ b/front/src/components/ui/Loader.vue
@@ -21,5 +21,5 @@ const { container = true } = defineProps<{ container?: boolean }>()
 </template>
 
 <style lang="scss">
-@import './loader.scss'
+@use './loader.scss'
 </style>
diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index ff8a7b601..d54f427ad 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -148,5 +148,5 @@ onKeyboardShortcut('escape', () => { isOpen.value = false })
 </template>
 
 <style lang="scss">
-@import './modal.scss'
+@use './modal.scss'
 </style>
diff --git a/front/src/components/ui/Pagination.vue b/front/src/components/ui/Pagination.vue
index a65f485f7..5b22305ab 100644
--- a/front/src/components/ui/Pagination.vue
+++ b/front/src/components/ui/Pagination.vue
@@ -179,5 +179,5 @@ watch(page, (_) => {
 </template>
 
 <style lang="scss">
-@import './pagination.scss'
+@use './pagination.scss'
 </style>
diff --git a/front/src/components/ui/Popover.vue b/front/src/components/ui/Popover.vue
index f345f6042..7834e601a 100644
--- a/front/src/components/ui/Popover.vue
+++ b/front/src/components/ui/Popover.vue
@@ -159,5 +159,5 @@ watch(isOpen, (isOpen) => {
 </template>
 
 <style lang="scss">
-@import './popover.scss'
+@use './popover.scss'
 </style>
diff --git a/front/src/components/ui/Tabs.vue b/front/src/components/ui/Tabs.vue
index 266a4a62a..0fc3236bd 100644
--- a/front/src/components/ui/Tabs.vue
+++ b/front/src/components/ui/Tabs.vue
@@ -63,5 +63,5 @@ watch(tabs, () => {
 </template>
 
 <style lang="scss">
-@import './tabs.scss'
+@use './tabs.scss'
 </style>
diff --git a/front/src/components/ui/Textarea.vue b/front/src/components/ui/Textarea.vue
index 2eade843c..c99ca4d59 100644
--- a/front/src/components/ui/Textarea.vue
+++ b/front/src/components/ui/Textarea.vue
@@ -362,5 +362,5 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
-@import './textarea.scss';
+@use './textarea.scss';
 </style>
diff --git a/front/src/components/ui/Toc.vue b/front/src/components/ui/Toc.vue
index d86d06447..7d0e12127 100644
--- a/front/src/components/ui/Toc.vue
+++ b/front/src/components/ui/Toc.vue
@@ -55,5 +55,5 @@ watchEffect(() => {
 </template>
 
 <style lang="scss">
-@import './toc.scss'
+@use './toc.scss'
 </style>
diff --git a/front/src/components/ui/button/Options.vue b/front/src/components/ui/button/Options.vue
index afd967473..25bd05864 100644
--- a/front/src/components/ui/button/Options.vue
+++ b/front/src/components/ui/button/Options.vue
@@ -21,5 +21,5 @@ defineProps<{
 </template>
 
 <style lang="scss">
-@import './options.scss'
+@use './options.scss'
 </style>
diff --git a/front/src/components/ui/button/Play.vue b/front/src/components/ui/button/Play.vue
index eb93bab93..09d4890ed 100644
--- a/front/src/components/ui/button/Play.vue
+++ b/front/src/components/ui/button/Play.vue
@@ -15,5 +15,5 @@ const play = defineEmits(['play'])
 </template>
 
 <style lang="scss">
-@import './play.scss';
+@use './play.scss';
 </style>
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 556adadc4..624a5af10 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -3,60 +3,60 @@ $desktop-sidebar-width: 275px;
 $widedesktop-sidebar-width: 275px;
 $bottom-player-height: 4rem;
 
-@import "./vendor/_media.scss";
+@use "./vendor/_media.scss";
 
-@import "./globals/_app.scss";
-@import "./globals/_channels.scss";
-@import "./globals/_layout.scss";
-@import "./globals/_utils.scss";
+@use "./globals/_app.scss";
+@use "./globals/_channels.scss";
+@use "./globals/_layout.scss";
+@use "./globals/_utils.scss";
 
-@import "./components/_action_table.scss";
-@import "./components/_album_card.scss";
-@import "./components/_attachment_input.scss";
-@import "./components/_avatar.scss";
-@import "./components/_builder.scss";
-@import "./components/_button.scss";
-@import "./components/_card.scss";
-@import "./components/_content_form.scss";
-@import "./components/_copy_input.scss";
-@import "./components/_empty_state.scss";
-@import "./components/_favorite.scss";
-@import "./components/_form.scss";
-@import "./components/_file_upload.scss";
-@import "./components/_fs_browser.scss";
-@import "./components/_fs_logs.scss";
-@import "./components/_header.scss";
-@import "./components/_label.scss";
-@import "./components/_modal.scss";
-@import "./components/_pagination.scss";
-@import "./components/_placeholder.scss";
-@import "./components/_play_button.scss";
-@import "./components/_play_indicator.scss";
-@import "./components/_player.scss";
-@import "./components/_playlist_editor.scss";
-@import "./components/_queue.scss";
-@import "./components/_settings_group.scss";
-@import "./components/_search.scss";
-@import "./components/_sidebar.scss";
-@import "./components/_table.scss";
-@import "./components/_tags_list.scss";
-@import "./components/_tooltip.scss";
-@import "./components/_track_widget.scss";
-@import "./components/_track_table.scss";
-@import "./components/_user_link.scss";
-@import "./components/user_modal.scss";
-@import "./components/_volume_control.scss";
-@import "./components/_loaders.scss";
+@use "./components/_action_table.scss";
+@use "./components/_album_card.scss";
+@use "./components/_attachment_input.scss";
+@use "./components/_avatar.scss";
+@use "./components/_builder.scss";
+@use "./components/_button.scss";
+@use "./components/_card.scss";
+@use "./components/_content_form.scss";
+@use "./components/_copy_input.scss";
+@use "./components/_empty_state.scss";
+@use "./components/_favorite.scss";
+@use "./components/_form.scss";
+@use "./components/_file_upload.scss";
+@use "./components/_fs_browser.scss";
+@use "./components/_fs_logs.scss";
+@use "./components/_header.scss";
+@use "./components/_label.scss";
+@use "./components/_modal.scss";
+@use "./components/_pagination.scss";
+@use "./components/_placeholder.scss";
+@use "./components/_play_button.scss";
+@use "./components/_play_indicator.scss";
+@use "./components/_player.scss";
+@use "./components/_playlist_editor.scss";
+@use "./components/_queue.scss";
+@use "./components/_settings_group.scss";
+@use "./components/_search.scss";
+@use "./components/_sidebar.scss";
+@use "./components/_table.scss";
+@use "./components/_tags_list.scss";
+@use "./components/_tooltip.scss";
+@use "./components/_track_widget.scss";
+@use "./components/_track_table.scss";
+@use "./components/_user_link.scss";
+@use "./components/user_modal.scss";
+@use "./components/_volume_control.scss";
+@use "./components/_loaders.scss";
 
-@import "./pages/_about.scss";
-@import "./pages/_admin_account_detail.scss";
-@import "./pages/_admin_domain_detail.scss";
-@import "./pages/_admin_library.scss";
-@import "./pages/_artists.scss";
-@import "./pages/_home.scss";
-@import "./pages/_library.scss";
-@import "./pages/_notifications.scss";
-@import "./pages/_profile.scss";
+@use "./pages/_about.scss";
+@use "./pages/_admin_account_detail.scss";
+@use "./pages/_admin_domain_detail.scss";
+@use "./pages/_admin_library.scss";
+@use "./pages/_artists.scss";
+@use "./pages/_home.scss";
+@use "./pages/_library.scss";
+@use "./pages/_notifications.scss";
+@use "./pages/_profile.scss";
 
-@import "./themes/light/_main.scss";
-@import "./themes/dark/_main.scss";
+@use "./themes/light/_main.scss";
+@use "./themes/dark/_main.scss";
diff --git a/front/src/style/base/generic.scss b/front/src/style/base/generic.scss
index 6475a72c8..a742afb11 100644
--- a/front/src/style/base/generic.scss
+++ b/front/src/style/base/generic.scss
@@ -1,7 +1,9 @@
+@use "../inc/theme";
+
 // Links
 %link,
 .funkwhale.link {
-  @include light-theme {
+  @include theme.light-theme {
     --fw-link-color: var(--fw-blue-400);
     --fw-link-hover-color: var(--fw-blue-500);
 
@@ -11,7 +13,7 @@
     }
   }
 
-  @include dark-theme {
+  @include theme.dark-theme {
     --fw-link-color: var(--fw-gray-300);
     --fw-link-hover-color: var(--fw-gray-400);
 
@@ -53,11 +55,11 @@
   border: none;
   border-bottom: 1px solid var(--fw-border-color);
 
-  @include light-theme {
+  @include theme.light-theme {
     --fw-border-color: var(--fw-gray-200);
   }
 
-  @include dark-theme {
+  @include theme.dark-theme {
     --fw-border-color: var(--fw-gray-800);
   }
 
diff --git a/front/src/style/base/index.scss b/front/src/style/base/index.scss
index e1448946d..21f2cb50d 100644
--- a/front/src/style/base/index.scss
+++ b/front/src/style/base/index.scss
@@ -1 +1 @@
-@import "generic"
+@use "generic"
diff --git a/front/src/style/font.scss b/front/src/style/font.scss
index 31f534e5f..5cc00dfdd 100644
--- a/front/src/style/font.scss
+++ b/front/src/style/font.scss
@@ -1,4 +1,4 @@
-@import url("~/style/bootstrap-icons/font/bootstrap-icons.css");
+@use url("~/style/bootstrap-icons/font/bootstrap-icons.css");
 
 @font-face {
   font-family: Lato;
diff --git a/front/src/style/funkwhale.scss b/front/src/style/funkwhale.scss
index 5f809d3ff..d4b20a038 100644
--- a/front/src/style/funkwhale.scss
+++ b/front/src/style/funkwhale.scss
@@ -1,11 +1,11 @@
 @charset "utf-8";
-@import "base/index";
-@import "inc/theme.scss";
-@import "font";
-@import "colors";
+@use "base/index";
+@use "inc/theme.scss";
+@use "font";
+@use "colors";
 
 html, body {
-  font-family: $font-main;
+  font-family: theme.$font-main;
   font-size: 16px;
   margin: 0;
 }
diff --git a/front/src/style/inc/theme.scss b/front/src/style/inc/theme.scss
index 871a8be2c..322199051 100644
--- a/front/src/style/inc/theme.scss
+++ b/front/src/style/inc/theme.scss
@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:selector";
 $font-main: "Lato", sans-serif;
 
 @mixin theme($isDark) {
@@ -12,16 +14,16 @@ $font-main: "Lato", sans-serif;
 
   // If we call `@include dark-theme {}` at the root of the file
   @if & == null {
-    $root-selectors: append($root-selectors, $root-element);
+    $root-selectors: list.append($root-selectors, $root-element);
   } @else {
     // For every selector in selector list
     @each $selector in & {
       // If it is `html`, we add a root rule
       @if #{$selector} == ":root" or #{$selector} == "html" {
-        $root-selectors: append($root-selectors, $root-element, comma);
+        $root-selectors: list.append($root-selectors, $root-element, comma);
         // If it's any other rule, we append it to the root rule
       } @else {
-        $root-selectors: append($root-selectors, "#{selector-nest($root-element, $selector)}", comma);
+        $root-selectors: list.append($root-selectors, "#{selector.nest($root-element, $selector)}", comma);
       }
     }
 
diff --git a/front/src/style/themes/dark/_main.scss b/front/src/style/themes/dark/_main.scss
index 6a9c54f75..e1c557618 100644
--- a/front/src/style/themes/dark/_main.scss
+++ b/front/src/style/themes/dark/_main.scss
@@ -3,5 +3,5 @@
 
 .theme-dark {
   $fwVars: meta.module-variables("vars");
-  @import "../../_css_vars.scss";
+  @use "../../_css_vars.scss";
 }
diff --git a/front/src/style/themes/dark/_vars.scss b/front/src/style/themes/dark/_vars.scss
index e0f3ef8a3..247d3ffbb 100644
--- a/front/src/style/themes/dark/_vars.scss
+++ b/front/src/style/themes/dark/_vars.scss
@@ -30,4 +30,4 @@ $secondary-menu-active-item-color: $text-color;
 $segment-background: $light-background-color;
 $table-background: $input-background;
 
-@import "../../_vars";
+@use "../../_vars";
diff --git a/front/src/style/themes/light/_main.scss b/front/src/style/themes/light/_main.scss
index cbd52cc28..fc7f45900 100644
--- a/front/src/style/themes/light/_main.scss
+++ b/front/src/style/themes/light/_main.scss
@@ -4,6 +4,6 @@
 $fwVars: meta.module-variables("vars");
 .theme-light {
   & {
-    @import "../../_css_vars.scss";
+    @use "../../_css_vars.scss";
   }
 }
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index aa3943a5c..1b4b1caef 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -222,7 +222,7 @@ const shuffle = () => {}
       />
       <playlist-dropdown
         :playlist="playlist"
-        @import="fetchData"
+        @use="fetchData"
       />
     </Layout>
   </Header>
diff --git a/front/ui-docs/vite.config.ts b/front/ui-docs/vite.config.ts
index dca558272..fbd7f4ee6 100644
--- a/front/ui-docs/vite.config.ts
+++ b/front/ui-docs/vite.config.ts
@@ -20,9 +20,9 @@ export default defineConfig({
       scss: {
         additionalData: `
           $docs: ${!!process.env.VP_DOCS};
-          @import "~/style/inc/theme.scss";
-          @import "~/style/inc/docs.scss";
-          @import "~/style/funkwhale.scss";
+          @use "~/style/inc/theme.scss";
+          @use "~/style/inc/docs.scss";
+          @use "~/style/funkwhale.scss";
         `
       }
     }
diff --git a/front/vite.config.ts b/front/vite.config.ts
index 46a00cd71..27c481c5d 100644
--- a/front/vite.config.ts
+++ b/front/vite.config.ts
@@ -81,8 +81,8 @@ export default defineConfig(({ mode }) => ({
         additionalData: `
           $docs: ${!!process.env.VP_DOCS};
           @use "~/style/_vars" as *;
-          @import "~/style/inc/theme";
-          @import "~/style/funkwhale";
+          @use "~/style/inc/theme";
+          @use "~/style/funkwhale";
         `
       }
     }