diff --git a/src/sites/clips/styles/clips-main.scss b/src/sites/clips/styles/clips-main.scss
index 9c3bd780..84719c23 100644
--- a/src/sites/clips/styles/clips-main.scss
+++ b/src/sites/clips/styles/clips-main.scss
@@ -1,5 +1,5 @@
-@import 'styles/main.scss';
-@import '../../twitch-twilight/styles/mod_card.scss';
+@use '../../../../styles/main.scss';
+@use '../../twitch-twilight/styles/mod_card.scss';
 
 .tw-root--theme-dark, html {
 	body {
diff --git a/src/sites/player/styles/player-main.scss b/src/sites/player/styles/player-main.scss
index 0fb1da36..25142dc7 100644
--- a/src/sites/player/styles/player-main.scss
+++ b/src/sites/player/styles/player-main.scss
@@ -1,4 +1,4 @@
-@import 'styles/main.scss';
+@use '../../../../styles/main.scss';
 
 .video-player__inactive,
 .video-player__overlay[data-controls="false"] {
@@ -55,4 +55,4 @@ div[data-a-target="player-settings-menu"] {
 
 .ffz--cc-button {
 	order: 999;
-}
\ No newline at end of file
+}
diff --git a/src/sites/twitch-twilight/styles/main.scss b/src/sites/twitch-twilight/styles/main.scss
index 530e813b..54487f3c 100644
--- a/src/sites/twitch-twilight/styles/main.scss
+++ b/src/sites/twitch-twilight/styles/main.scss
@@ -1,15 +1,15 @@
-@import 'styles/main.scss';
+@use '../../../../styles/main.scss';
 
-@import 'menu_button';
-@import 'player';
-@import 'channel';
+@use 'menu_button';
+@use 'player';
+@use 'channel';
 
-@import 'chat';
-@import 'directory';
+@use 'chat';
+@use 'directory';
 
-@import 'fixes';
+@use 'fixes';
 
 //@import 'host_options';
-@import 'featured_follow';
-@import 'mod_card';
-@import 'easteregg';
+@use 'featured_follow';
+@use 'mod_card';
+@use 'easteregg';
diff --git a/styles/icons.scss b/styles/icons.scss
index c3a857d1..32b5c82c 100644
--- a/styles/icons.scss
+++ b/styles/icons.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @font-face {
 	font-family: 'ffz-fontello';
 	src: url('~res/font/ffz-fontello.woff2') format('woff2'),
@@ -94,7 +95,7 @@
 	}
 }
 
-@import "./fontello/ffz-fontello-codes.scss";
+@include meta.load-css("fontello/ffz-fontello-codes.scss");
 
 .ffz-i-pd-1:before { margin-right: 1rem }
 .ffz-i-pd-2:before { margin-right: 2rem }
diff --git a/styles/main.scss b/styles/main.scss
index 7fa545e0..2879fd78 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -1,12 +1,12 @@
-@import 'icons';
-@import 'tooltips';
-@import 'widgets';
-@import 'dialog';
+@use 'icons';
+@use 'tooltips';
+@use 'widgets';
+@use 'dialog';
 
-@import 'native/index';
-@import 'structure/index';
+@use 'native/index';
+@use 'structure/index' as index2;
 
-@import 'chat';
+@use 'chat';
 
 @keyframes ffz-rotateplane {
 	0% { transform: rotateY(90deg) rotateX(180deg) }
diff --git a/styles/native/index.scss b/styles/native/index.scss
index dad74ad0..ae090455 100644
--- a/styles/native/index.scss
+++ b/styles/native/index.scss
@@ -1,14 +1,14 @@
-@import "button";
-@import "checkbox";
-@import "interactable";
-@import "text";
-@import "link";
-@import "card";
-@import "tag";
-@import "progress";
-@import "tooltip";
-@import "balloon";
-@import "slider";
+@use "button";
+@use "checkbox";
+@use "interactable";
+@use "text";
+@use "link";
+@use "card";
+@use "tag";
+@use "progress";
+@use "tooltip";
+@use "balloon";
+@use "slider";
 
 .tw-line-height-body {
     line-height: 1.5!important
diff --git a/styles/structure/index.scss b/styles/structure/index.scss
index 678f0fb2..1b9ce460 100644
--- a/styles/structure/index.scss
+++ b/styles/structure/index.scss
@@ -1,4 +1,4 @@
-@import "balloon";
+@use "balloon";
 
 .ffz-avatar {
 	background-color: inherit;
diff --git a/styles/widgets.scss b/styles/widgets.scss
index 558cc1ad..550e7866 100644
--- a/styles/widgets.scss
+++ b/styles/widgets.scss
@@ -1,21 +1,21 @@
-@import "./widgets/container.scss";
+@use "widgets/container.scss";
 
-@import "./widgets/main-menu.scss";
-@import "./widgets/menu-container.scss";
-@import "./widgets/tab-container.scss";
+@use "widgets/main-menu.scss";
+@use "widgets/menu-container.scss";
+@use "widgets/tab-container.scss";
 
-@import "./widgets/key-picker.scss";
-@import "./widgets/menu-tree.scss";
-@import "./widgets/profile-selector.scss";
-@import "./widgets/badge-visibility.scss";
-@import "./widgets/add-ons.scss";
+@use "widgets/key-picker.scss";
+@use "widgets/menu-tree.scss";
+@use "widgets/profile-selector.scss";
+@use "widgets/badge-visibility.scss";
+@use "widgets/add-ons.scss";
 
-@import "./widgets/color-picker.scss";
-@import "./widgets/icon-picker.scss";
+@use "widgets/color-picker.scss";
+@use "widgets/icon-picker.scss";
 
-@import "./widgets/chat-tester.scss";
+@use "widgets/chat-tester.scss";
 
-@import "./widgets/check-box.scss";
+@use "widgets/check-box.scss";
 
 .tw-display-inline { display: inline !important }
 .tw-width-auto { width: auto !important }
diff --git a/styles/widgets/menu-container.scss b/styles/widgets/menu-container.scss
index f90fd056..6fddc535 100644
--- a/styles/widgets/menu-container.scss
+++ b/styles/widgets/menu-container.scss
@@ -1,3 +1,5 @@
+@use "container";
+
 .ffz--menu-container {
 	@extend .ffz--outer-container;
 	@extend .ffz--inner-container;
@@ -5,7 +7,7 @@
 	position: relative;
 
 	&:not(.border):not(.border-b) {
-		margin-bottom: $spacing;
+		margin-bottom: container.$spacing;
 	}
 
 	& > div {
@@ -19,7 +21,7 @@
 
 	& > header {
 		position: absolute;
-		top: 0; left: $spacing - 0.5rem;
+		top: 0; left: container.$spacing - 0.5rem;
 		transform: translateY(-50%);
 		padding: 0 0.5rem;
 
diff --git a/styles/widgets/tab-container.scss b/styles/widgets/tab-container.scss
index f0c1c615..15928511 100644
--- a/styles/widgets/tab-container.scss
+++ b/styles/widgets/tab-container.scss
@@ -1,3 +1,5 @@
+@use "container";
+
 .ffz--tab-container {
 	@extend .ffz--outer-container;
 
@@ -33,4 +35,4 @@
 	& > section {
 		@extend .ffz--inner-container;
 	}
-}
\ No newline at end of file
+}