Move scss files out of static, set up webpack for css compilation

.gitignore

@@ -224,7 +224,7 @@ typings/
 # NPM Built
 main.js
 main.js.LICENSE.txt
-style.min.css
+main.css
 
 # Mac OS X dir files
 .DS_Store

.prettierignore

@@ -0,0 +1,2 @@
+# ignore Django templates
+**/templates/**/*.html

csm_web/frontend/src/components/App.tsx

@@ -15,8 +15,8 @@ import LogoNoText from "../../static/frontend/img/logo_no_text.svg";
 import LogOutIcon from "../../static/frontend/img/log_out.svg";
 
 // Styles
-import "../../static/frontend/css/header.scss";
-import "../../static/frontend/css/home.scss";
+import "../css/header.scss";
+import "../css/home.scss";
 
 interface ErrorType {
   message: string;

csm_web/frontend/src/components/CourseMenu.tsx

@@ -7,7 +7,7 @@ import Course from "./course/Course";
 import LoadingSpinner from "./LoadingSpinner";
 
 // Styles
-import "../../static/frontend/css/course-menu.scss";
+import "../css/course-menu.scss";
 
 const CourseMenu = () => {
   const { data: jsonCourses, isSuccess: coursesLoaded } = useCourses();

csm_web/frontend/src/components/Home.tsx

@@ -11,7 +11,7 @@ import LoadingSpinner from "./LoadingSpinner";
 import PlusIcon from "../../static/frontend/img/plus.svg";
 
 // Styles
-import scssColors from "../../static/frontend/css/base/colors-export.module.scss";
+import scssColors from "../css/base/colors-export.module.scss";
 
 const Home = () => {
   const { data: profiles, isSuccess: profilesLoaded, isError: profilesLoadError } = useProfiles();

csm_web/frontend/src/components/Policies.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // Styles
-import "../../static/frontend/css/policies.scss";
+import "../css/policies.scss";
 
 // Data
 import SECTIONS from "../../static/frontend/data/enrollment_policies";

csm_web/frontend/src/components/course/Course.tsx

@@ -14,7 +14,7 @@ import PencilIcon from "../../../static/frontend/img/pencil.svg";
 import PlusIcon from "../../../static/frontend/img/plus.svg";
 
 // Styles
-import "../../../static/frontend/css/course.scss";
+import "../../css/course.scss";
 
 const DAY_OF_WEEK_ABREVIATIONS: { [day: string]: string } = Object.freeze({
   Monday: "M",

csm_web/frontend/src/components/course/SettingsModal.tsx

@@ -9,7 +9,7 @@ import Modal from "../Modal";
 import InfoIcon from "../../../static/frontend/img/info.svg";
 
 // Styles
-import "../../../static/frontend/css/course-settings.scss";
+import "../../css/course-settings.scss";
 
 interface SettingsModalProps {
   courseId: number;

csm_web/frontend/src/components/course/WhitelistModal.tsx

@@ -16,7 +16,7 @@ import UndoIcon from "../../../static/frontend/img/undo.svg";
 import XIcon from "../../../static/frontend/img/x.svg";
 
 // Styles
-import "../../../static/frontend/css/whitelist_modal.scss";
+import "../../css/whitelist_modal.scss";
 
 interface WhitelistModalProps {
   course: Course;

csm_web/frontend/src/components/enrollment_automation/EnrollmentMatcher.tsx

@@ -9,7 +9,7 @@ import { CoordinatorMatcherForm } from "./coordinator/CoordinatorMatcherForm";
 import { MentorSectionPreferences } from "./MentorSectionPreferences";
 
 // Styles
-import "../../../static/frontend/css/enrollment_matcher.scss";
+import "../../css/enrollment_matcher.scss";
 
 export interface MatcherProfile {
   courseId: number;

csm_web/frontend/src/components/enrollment_automation/calendar/Calendar.tsx

@@ -4,7 +4,7 @@ import { CalendarDay, CalendarDayHeader } from "./CalendarDay";
 import { CalendarEvent, CalendarEventSingleTime, DAYS } from "./CalendarTypes";
 
 // Styles
-import "../../../../static/frontend/css/calendar.scss";
+import "../../../css/calendar.scss";
 
 // default start and end times for calendar
 const START = 8 * 60 + 0; // 8:00 AM

csm_web/frontend/src/components/resource_aggregation/ResourceTable.tsx

@@ -15,7 +15,7 @@ import { emptyResource, Link, Resource, Worksheet } from "./ResourceTypes";
 import PlusIcon from "../../../static/frontend/img/plus.svg";
 
 // Styles
-import "../../../static/frontend/css/resource_aggregation.scss";
+import "../../css/resource_aggregation.scss";
 
 interface ResourceTableProps {
   courseID: number;

csm_web/frontend/src/components/section/CoordinatorAddStudentModal.tsx

@@ -10,7 +10,7 @@ import CheckCircle from "../../../static/frontend/img/check_circle.svg";
 import ErrorCircle from "../../../static/frontend/img/error_outline.svg";
 
 // Styles
-import "../../../static/frontend/css/coordinator-add-student.scss";
+import "../../css/coordinator-add-student.scss";
 
 enum CoordModalStates {
   INITIAL = "INITIAL",

csm_web/frontend/src/components/section/MentorSectionAttendance.tsx

@@ -15,8 +15,8 @@ import randomWords from "random-words";
 import CheckCircle from "../../../static/frontend/img/check_circle.svg";
 
 // Styles
-import scssColors from "../../../static/frontend/css/base/colors-export.module.scss";
-import "../../../static/frontend/css/word-of-the-day.scss";
+import scssColors from "../../css/base/colors-export.module.scss";
+import "../../css/word-of-the-day.scss";
 
 interface MentorSectionAttendanceProps {
   sectionId: number;

csm_web/frontend/src/components/section/MentorSectionInfo.tsx

@@ -14,7 +14,7 @@ import XIcon from "../../../static/frontend/img/x.svg";
 import PencilIcon from "../../../static/frontend/img/pencil.svg";
 
 // Styles
-import "../../../static/frontend/css/coordinator-add-student.scss";
+import "../../css/coordinator-add-student.scss";
 
 enum ModalStates {
   NONE = "NONE",

csm_web/frontend/src/components/section/Section.tsx

@@ -7,8 +7,8 @@ import { useSection } from "../../utils/queries/sections";
 import LoadingSpinner from "../LoadingSpinner";
 
 // Styles
-import scssColors from "../../../static/frontend/css/base/colors-export.module.scss";
-import "../../../static/frontend/css/section.scss";
+import scssColors from "../../css/base/colors-export.module.scss";
+import "../../css/section.scss";
 
 export const ROLES = Object.freeze({ COORDINATOR: "COORDINATOR", STUDENT: "STUDENT", MENTOR: "MENTOR" });
 

csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx

@@ -3,7 +3,7 @@ import { useSpacetimeDeleteMutation, useSpacetimeOverrideDeleteMutation } from "
 import Modal from "../Modal";
 
 // Styles
-import "../../../static/frontend/css/spacetime_delete.scss";
+import "../../css/spacetime_delete.scss";
 
 interface SpacetimeDeleteProps {
   spacetimeId: number;

csm_web/frontend/src/components/section/SpacetimeEditModal.tsx

@@ -7,7 +7,7 @@ import TimeInput from "../TimeInput";
 import { DAYS_OF_WEEK, zeroPadTwoDigit } from "./utils";
 
 // Styles
-import "../../../static/frontend/css/spacetime-edit.scss";
+import "../../css/spacetime-edit.scss";
 
 interface SpacetimeEditModalProps {
   sectionId: number;

csm_web/frontend/src/components/section/StudentDropper.tsx

@@ -6,7 +6,7 @@ import Modal from "../Modal";
 import XIcon from "../../../static/frontend/img/x.svg";
 
 // Styles
-import "../../../static/frontend/css/student_dropper.scss";
+import "../../css/student_dropper.scss";
 
 interface StudentDropperProps {
   id: number;

csm_web/frontend/src/components/section/StudentSection.tsx

@@ -16,8 +16,8 @@ import LoadingSpinner from "../LoadingSpinner";
 import CheckCircle from "../../../static/frontend/img/check_circle.svg";
 
 // Styles
-import scssColors from "../../../static/frontend/css/base/colors-export.module.scss";
-import "../../../static/frontend/css/word-of-the-day.scss";
+import scssColors from "../../css/base/colors-export.module.scss";
+import "../../css/word-of-the-day.scss";
 
 interface StudentSectionType {
   id: number;

csm_web/frontend/src/index.tsx

@@ -1,3 +1,7 @@
+// Global styles (imported before any components to allow for overrides)
+import "./css/base/styles.scss";
+import "./css/fontawesome-styles.scss";
+
 import App from "./components/App";
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
@@ -6,10 +10,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
-// Global styles
-import "../static/frontend/css/base/styles.scss";
-import "../static/frontend/css/fontawesome-styles.scss";
-
 // react-query setup
 const queryClient = new QueryClient({
   defaultOptions: {

csm_web/frontend/templates/frontend/index.html

@@ -8,6 +8,9 @@
 	<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
 	<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 	{% endif %}
+
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'frontend/main.css' %}" />
 {% endblock %}
 
 {% block body %}
@@ -16,5 +19,5 @@
 
 {% block after_body %}
 	{% load static %}
-  <script src="{% static 'frontend/main.js' %}"></script>
+    <script src="{% static 'frontend/main.js' %}"></script>
 {% endblock %}