Update sass example

_mantine.scss

@@ -0,0 +1,52 @@
+@use 'sass:math';
+
+// Define variables for your breakpoints,
+// values must be the same as in your theme
+$mantine-breakpoint-xs: '36em';
+$mantine-breakpoint-sm: '48em';
+$mantine-breakpoint-md: '62em';
+$mantine-breakpoint-lg: '75em';
+$mantine-breakpoint-xl: '88em';
+
+@function rem($value) {
+  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
+}
+
+@mixin light {
+  [data-mantine-color-scheme='light'] & {
+    @content;
+  }
+}
+
+@mixin dark {
+  [data-mantine-color-scheme='dark'] & {
+    @content;
+  }
+}
+
+@mixin hover {
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
+
+  @media (hover: none) {
+    &:active {
+      @content;
+    }
+  }
+}
+
+// Add direction mixins if you need rtl support
+@mixin rtl {
+  [dir='rtl'] & {
+    @content;
+  }
+}
+
+@mixin ltr {
+  [dir='ltr'] & {
+    @content;
+  }
+}

mixins/_mixins.scss

@@ -1,17 +0,0 @@
-$mantine-breakpoint-xs: '36em';
-$mantine-breakpoint-sm: '48em';
-$mantine-breakpoint-md: '62em';
-$mantine-breakpoint-lg: '75em';
-$mantine-breakpoint-xl: '88em';
-
-@mixin light {
-  [data-mantine-color-scheme='light'] & {
-    @content;
-  }
-}
-
-@mixin dark {
-  [data-mantine-color-scheme='dark'] & {
-    @content;
-  }
-}

next.config.js

@@ -12,7 +12,6 @@ module.exports = withBundleAnalyzer({
   },
 
   sassOptions: {
-    includePaths: ['./mixins'],
+    prependData: `@import "./_mantine.scss";`,
-    prependData: `@import "mixins";`,
   },
 });