my SCSS style is not working at all in React project

Question

i am trying to do my Front with React and Sass, i installed Sass with the command, yarn add sass everything normal. But when i define all my components in the scss file my site and my files .jsx does not link or that it ´s what i think, i did not get errors on my cmd or javascript console. here is the code and the pictures

import React from 'react'

const Login = () => {

    return (

        <div className="auth" >  

        <h1>Login </h1>
        
        <form> 

<input type="text" placeholder="set your username "/> 
<input type="password" placeholder="set your password"/> 
<button>Login</button>


        </form>
        </div>
        
    )


}

export default Login

scss

$lightGreen: #b9e7e7;

.app {
  display: flex;
  justify-content: center;
  .container {
    width: 1024px;

    .link {
      text-decoration: none;
      color: inherit;
    }
    //LOGIN & REGISTER

    .auth {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: $lightGreen;

      h1 {
        font-size: 20px;
        color: teal;
        margin-bottom: 20px;
      }

      form {
        display: flex;
        flex-direction: column;
        padding: 50px;
        background-color: white;
        width: 200px;
        gap: 20px;

        input {
          padding: 10px;
          border: none;
          border-bottom: 1px solid gray;
        }

        button {
          padding: 10px;
          border: none;
          background-color: teal;
          cursor: pointer;
          color: white;
        }

        p {
          font-size: 12px;
          color: red;
          text-align: center;
        }

        span {
          font-size: 12px;
          text-align: center;
        }
      }
    }

}
}

import React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
  Outlet,
} from "react-router-dom";

import Navbar from "./components/Navbar";
import Login from "./pages/Login";
import Register from "./pages/Register"
import Footer from "./components/Footer";
import Home from "./pages/Home";
import Single from "./pages/Single";
import Write from "./pages/Write";

const Layout = () => {

  return (
  
  
  <>
  <Navbar/>
  <Outlet/>
  <Footer/>
  
  </>
  
  
  );

};



const router = createBrowserRouter([
  
  {
    path: "/",
   element: <Layout/>,
   children: [
     {

      path: "/",
      element: <Home/>
     },
     {

      path: "/single",
      element: <Single/>

     },

     {

      path: "/write",
      element: <Write/>
     },

   ]
  },
  {
    path: "/register",
   element: <Register/> 
  },
  {
    path: "/login",
   element: <Login/> 
  },

  

]);

function App() {
  return (
    <div className="app">
      <div className="container"> 
        <RouterProvider router={router}/>
    </div>
    </div>
  );

}




export default App;
   

This is what i get... Just like if i was made nothing with styles.

Project folder order