Install sass npm package and rename all css files to scss

Author: zahrafalak

package-lock.json

@@ -36,6 +36,7 @@
 		"jsdom": "^24.1.1",
 		"lint-staged": "^15.2.9",
 		"prettier": "^3.3.3",
+		"sass-embedded": "^1.79.3",
 		"typescript-eslint": "^8.2.0",
 		"vite": "^5.3.5",
 		"vite-plugin-pwa": "^0.20.1",

package.json

@@ -4,7 +4,7 @@ import { SignOutButton } from "../api";
 import Navbar from "react-bootstrap/Navbar";
 import Container from "react-bootstrap/Container";
 
-import "./AuthenticatedNavBar.css";
+import "./AuthenticatedNavBar.scss";
 
 export function AuthenticatedNavBar() {
 	return (

src/components/AuthenticatedNavBar.css renamed to src/components/AuthenticatedNavBar.scss

@@ -1,4 +1,4 @@
-import "./ListItem.css";
+import "./ListItem.scss";
 import { updateItem, deleteItem, ListItem } from "../api";
 import { useState } from "react";
 import toast from "react-hot-toast";

src/components/AuthenticatedNavBar.tsx

@@ -1,4 +1,4 @@
-import "./SingleList.css";
+import "./SingleList.scss";
 import * as api from "../api/firebase";
 import Button from "react-bootstrap/Button";
 

src/components/ListItem.css renamed to src/components/ListItem.scss

@@ -4,7 +4,7 @@ import { BrowserRouter as Router } from "react-router-dom";
 import { App } from "./App";
 
 import "bootstrap/dist/css/bootstrap.min.css";
-import "./index.css";
+import "./index.scss";
 
 const root = createRoot(document.getElementById("root") as HTMLElement);
 root.render(