feat: Optimize SCSS architecture.

client/src/components/Preferences/PreferencesPage.js

@@ -8,6 +8,11 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
+import 'style/pages/Preferences/Page.scss';
+
+/**
+ * Preferences page.
+ */
 export default function PreferencesPage() {
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>

client/src/components/Preferences/PreferencesSidebar.js

@@ -4,6 +4,11 @@ import { useHistory, useLocation } from 'react-router-dom';
 import preferencesMenu from 'config/preferencesMenu';
 import PreferencesSidebarContainer from './PreferencesSidebarContainer';
 
+import 'style/pages/Preferences/Sidebar.scss';
+
+/**
+ * Preferences sidebar.
+ */
 export default function PreferencesSidebar() {
   const history = useHistory();
   const location = useLocation();

client/src/components/Preferences/PreferencesTopbar.js

@@ -10,6 +10,11 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 
 import { compose } from 'utils';
 
+import 'style/pages/Preferences/Topbar.scss';
+
+/**
+ * Preferences topbar.
+ */
 function PreferencesTopbar({ preferencesPageTitle }) {
   return (
     <div