React components can now access scss variables

declarations.d.ts

@@ -0,0 +1,2 @@
+// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts'). 
+declare module '*.module.scss'; 

package.json

@@ -21,11 +21,13 @@
     "style-loader": "^3.3.1",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
-  },
+    "@emotion/react": "^11.10.4",
-  "dependencies": {
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.9",
     "@types/jest": "^29.1.1",
     "@types/node": "^18.8.2",
+    "@types/node-sass": "^4.11.3",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",

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;
+@import "variables.module.scss";
-$container-background: lime;
+
-$title-color: cyan;
+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;
+}

webpack.config.js

@@ -33,7 +33,7 @@ module.exports = {
                 }
             },
             {
-                test: /\.s[ac]ss$/i,
+                test: /\.scss$/,
                 use: [
                     // Creates `style` nodes from JS strings
                     "style-loader",
@@ -50,7 +50,10 @@ module.exports = {
         ]
     },
     resolve: {
-        extensions: [".tsx", ".jsx", ".js"],
+        extensions: [".tsx", ".jsx", ".js", ".css", ".scss"],
+        alias: {
+            "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
+        }
     },
     plugins: [
         new HtmlWebpackPlugin({