Refactor Sass styling to reduce duplication

[nicholaschiang]

Is your feature request related to a problem? Please describe.

I've got a lot of Sass styling that's the same across multiple components (e.g. components/profile/profile.module.scss is very similar to components/settings/settings.module.scss because the UI on both pages looks the same).

Right now, I simply copy and modify existing stylesheets (to style new components) instead of taking advantage of Sass code re-usability features (e.g. mixins and variables).

Describe the solution you'd like

In order to maintain consistency across the entire app and reduce code duplication, I should:

• Research best ways to structure reusable mixins, variables, functions, etc (e.g. best practices used by MWC).
• Convert app-wide Sass variables (currently defined in styles/config.scss) to CSS variables (e.g. to fix Add dark mode #79).
• Update import resolutions and styling file structure:
  • Fix Debug Sass import file abbreviations #11 (file name import resolution errors).
  • Upgrade to Webpack 5 (Next.js has official support and has fixed deprecation warnings).
  • Remove the node_modules directory and actually use Yarn Berry's PNP features (which are supported by Webpack 5).
  • Debug sass-loader module resolution issues (e.g. address this issue).

Additional context
Ideally, I'd also work on reducing bundle sizes by somehow chunking RMWC's style sheets with their components too. Right now, this isn't possible because mdc defines global classes (and thus all global stylesheets must be imported into _app.tsx which loads them on every page). But, that's outside the scope of this issue.

[nicholaschiang]

I should also use the new Next.js css features to code-split RMWC styling into the pages that need it.

For now, that's a low priority because most pages require all of those styles anyways (and I don't think those styles are very large anyway).