React components can now access scss variables

src/App.tsx

@@ -1,12 +1,27 @@
 import React from 'react'
+import { Button, Box } from "@mui/material"
+import variables from "./variables.module.scss"
 import "./style.scss"
 
 export default function App() {
+    let boxStyle = {
+        width: "50%",
+        height: "50%",
+        border: '1px dashed grey',
+        backgroundColor: variables.boxBg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    }
+
     return (
         <main id="root">
             <h1>React with Webpack</h1>
+            <Button variant="contained">Hello world</Button>
             <div id="container">
-                <div id="box">This box should be centered <br/>(and also this this text)</div>
+                <Box sx={boxStyle}>
+                    This box should be centered <br />(and also this this text)
+                </Box>
             </div>
         </main>
     );

src/style.scss

@@ -1,6 +1,9 @@
-$box-background: blue;
-$container-background: lime;
-$title-color: cyan;
+@import "variables.module.scss";
+
+body {
+    background: #333;
+    color: #c5c8c6;
+}
 
 main {
     h1 {
@@ -8,7 +11,8 @@ main {
         text-align: center;
     }
 
-    #container{
+
+    #container {
         display: flex;
         background-color: $container-background;
         width: 100vw;
@@ -16,7 +20,7 @@ main {
         align-items: center;
         justify-content: center;
 
-        #box{
+        #box {
             width: 50%;
             height: 50%;
             background-color: $box-background;
@@ -26,6 +30,4 @@ main {
             justify-content: center;
         }
     }
-
-
 }

src/variables.module.scss

@@ -0,0 +1,9 @@
+$box-background: blue;
+$container-background: lime;
+$title-color: cyan;
+
+:export {
+    boxBg: $box-background;
+    containerBg: $container-background;
+    titleCol: $title-color;
+}