Use updated sass import syntax

web/.storybook/preview.scss

@@ -1,2 +1,2 @@
-@import '../styles/globals';
+@use '../styles/globals';
-@import '../styles/ant-overrides';
+@use '../styles/ant-overrides';

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 // The button that is displayed to scroll to the bottom of the chat.
 .toBottomWrap {

web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .chatModerationNotification {
   background-color: var(--theme-background-primary);

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .root {
   position: relative;

web/components/common/ContentHeader/ContentHeader.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 $vert-spacing: 0.75rem;
 

web/components/common/UserDropdown/UserDropdown.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .root {
   button {

web/components/layouts/Main/Main.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .layout {
   // this margin is for fixed header

web/components/ui/Content/Content.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .main {
   display: flex;

web/components/ui/CustomPageContent/CustomPageContent.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .customPageContent {
   font-size: 1rem;

web/components/ui/Footer/Footer.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .footer {
   display: flex;

web/components/ui/Header/Header.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .header {
   height: var(--header-height);

web/components/ui/Noscript/Noscript.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .noscript {
   position: fixed;

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .outerContainer {
   display: flex;

web/components/ui/OfflineEmbed/OfflineEmbed.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 $short-container-max-height: 480px;
 $short-container-min-height: 320px;

web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/mixins';
+@use '../../../../styles/mixins' as *;
 
 .followers {
   width: 100%;

web/components/ui/followers/SingleFollower/SingleFollower.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../../web/styles/mixins';
+@use '../../../../../web/styles/mixins' as *;
 
 .follower {
   border-color: rgb(0 0 0 / 30%);

web/components/video/OwncastPlayer/OwncastPlayer.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .container {
   display: grid;

web/components/video/VideoJS/VideoJS.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins' as *;
 
 .player {
   width: 100%;

web/styles/globals.scss

@@ -1,10 +1,10 @@
+@use './mixins' as *;
 @import '@fontsource/inter/300.css';
 @import '@fontsource/inter/400.css';
 @import '@fontsource/inter/600.css';
 @import '@fontsource/inter/800.css';
 @import '@fontsource/poppins/400.css';
 @import '@fontsource/poppins/600.css';
-@import './mixins';
 
 :root {
   --content-padding: 0.95rem;