new version of sass installed

client/package.json

@@ -15,11 +15,11 @@
         "@types/react": "^16.9.53",
         "@types/react-dom": "^16.9.8",
         "@types/react-router-dom": "^5.1.7",
-        "node-sass": "^5.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
+        "sass": "^1.32.8",
         "typescript": "^4.0.3",
         "web-vitals": "^0.2.4",
         "workbox-background-sync": "^5.1.3",

client/src/components/App/app.scss

-@import 'settings.scss';
+@use 'settings.scss';
+@use 'mixins.scss';
 
 html {
     scroll-behavior: smooth;
 }
 
 body {
-    color: $body-color;
-}
\ No newline at end of file
+    color: settings.$body-color;
+    @include mixins.breakpoint(large) {
+        color: black;
+    }
+}

client/src/scss/mixins.scss

-@import 'functions.scss';
-@import 'settings.scss';
+@use 'functions.scss';
+@use 'settings.scss';
 
 @mixin breakpoint($bp) {
-    @media screen and (min-width: getFrom($breakpoints, $bp)) {
+    @media screen and (min-width: functions.getFrom(settings.$breakpoints, $bp)) {
         @content;
     }
 }