Issue#47: Install and configure sass npm package

[zahrafalak]

Description

We need to add SCSS support to the project to improve the maintainability and organization of styles across components. SCSS offers enhanced styling capabilities, such as variables, nesting, and mixins, which will help make the code more modular and scalable.

Related Issue

Closes #47

Acceptance Criteria

• Install the sass npm package globally via npm install -g sass.
• Ensure SCSS files are imported and used in TypeScript components.
• Update at least one component to demonstrate the use of SCSS.

Type of Changes

enhancement feature

Notes

• The AuthenticatedNavBar.scss file is updated to demonstrate the use of scss. The nested CSS selectors show a clear visual hierarchy.
• A new partial _variables.scss is added under styles folder with some placeholder values for colours.

Related document resource

[github-actions]

Visit the preview URL for this PR (updated for commit ce31176):

https://tcl-77-smart-shopping-list--pr50-fz-clean-branch-lrlnktis.web.app

_{(expires Mon, 07 Oct 2024 04:33:38 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

[alex-andria]

I saw you wrote an example inside the acceptance criteria. But approving for now in the meantime!

[bbland1]

question: when running npm start i am getting an error about sass not installed after running npm i when switching to the branch. i'm not seeing it in the devDependenceies and i just want to check if it is something i am doing wrong 😅

[zahrafalak]

Huh, interesting. The error doesn't show up on my end so not sure what's up. Did you try to see if it works in the preview? If it works there and doesn't work when you checkout the branch, maybe try deleting the node modules and do npm ci?

[bbland1]

Thanks for doing this! I used the preview link to just see it was all still working and looking at it and it was well done. I really appreciate the example on the AuthenticatedNavBar! I've done some reading about bootstrap and sass so I think it is going to be really cool to have both of them! Seeing the changes in the className and how that will integrate with the bootstrap components is going to be quite nice. I'm excited to get the colors in there and see the process flow.

[zahrafalak]

Thanks for doing this! I used the preview link to just see it was all still working and looking at it and it was well done. I really appreciate the example on the AuthenticatedNavBar! I've done some reading about bootstrap and sass so I think it is going to be really cool to have both of them! Seeing the changes in the className and how that will integrate with the bootstrap components is going to be quite nice. I'm excited to get the colors in there and see the process flow.

Good to know that it was still working in preview 😄 Thanks for the feedback! Yeah, I do think this will work great together with the bootstrap components.