Switched to sass modules

client/src/App.test.tsx → client/src/components/App/App.test.tsx

 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './components/App';
+import App from './index';
 
-test('renders learn react link', () => {
+test('app renders `Home`', () => {
     render(<App />);
-    const linkElement = screen.getByText(/Hello world!/i);
+    const linkElement = screen.getByText(/Home/i);
     expect(linkElement).toBeInTheDocument();
 });
 

client/src/components/App/app.scss

-@import 'settings.scss';
+
+@use 'scss/settings';
 
 html {
     scroll-behavior: smooth;
 }
 
 body {
-    color: $body-color;
-}
+    color: settings.$body-color;
+}
\ No newline at end of file
+

client/src/components/App/index.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Home from 'components/pages/Home';
 import './app.scss';
 
-function App() {
+export default function App() {
     return (
         <Router>
             <Switch>
@@ -15,5 +15,3 @@ function App() {
     );
 }
 
-export default App;
-

client/src/components/pages/Home/index.tsx

-function Home() {
+
+export default function Home() {
     return (
         <div>
             Home
         </div>
     );
 }
-export default Home;
+

client/src/scss/functions.scss

+
 @function toRem($px) {
     @return ($px / 16px)+0rem;
 }
@@ -14,3 +15,4 @@
 @function hoverify($color) {
     @return scale-color($color, $lightness: +5%, $hue: +5%); 
 }
+

client/src/scss/mixins.scss

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

client/src/scss/settings.scss

-//COLORS
+
+// Colors
 $primary: #AC42FF;
 $secondary: #F15154;
 $accent: #7DEFFF;
@@ -20,7 +21,7 @@ $radial-gradient: radial-gradient(100% 115% at 0% 0%, $primary 0%, $secondary 10
 
 $body-color: #4B4B4B;
 
-//TYPOGRAPHY
+// Typography
 $weight-light: 300;
 $weight-regular: 400;
 $weight-medium: 500;
@@ -28,10 +29,11 @@ $weight-semi-bold: 600;
 $weight-bold: 700;
 
 
-//Breakpoints
+// Breakpoints
 $breakpoints: (
     'small': 360px,
     'medium': 820px,
     'large': 1280px,
     'xlarge': 1420px
 );
+