Config: Refactor SCSS build process in frontend (#923)

* config: Refactor SCSS build process in frontend

* config: Make storybook import the sass file directly as well

.github/workflows/storybook.yml

@@ -20,9 +20,6 @@ jobs:
       - name: Install dependencies
         run: yarn
         working-directory: ./frontend
-      - name: Run SCSS
-        run: yarn scss
-        working-directory: ./frontend
       - name: Build Storybook
         run: yarn storybook:build
         working-directory: ./frontend

docker-compose.yaml

@@ -103,7 +103,7 @@ services:
           - VITE_STRICT=${FRONTEND_STRICT}
         ports:
           - 3000:3000
-        command: sh -c "yarn scss && yarn start"
+        command: yarn start
 volumes:
     db_data:
     db_backup:

frontend/.storybook/preview.js

@@ -1,5 +1,5 @@
 import "../public/vendor/bootstrap/bootstrap.min.css";
-import "../src/index.css";
+import "../src/index.scss";
 import { initAudioListener } from "../src/util/audio";
 import { initWebAudioListener } from "../src/util/webAudio";
 

frontend/Dockerfile

@@ -12,7 +12,6 @@ COPY . /client/
 COPY .env /client/
 
 RUN yarn
-RUN yarn scss
 RUN yarn build
 
 # Runner image that serves the built app using nginx

frontend/package.json

@@ -27,13 +27,11 @@
   },
   "scripts": {
     "start": "vite --host",
-    "build": "sass src/index.scss src/index.css && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "test": "vitest",
     "test:ci": "vitest --watch=false --coverage",
     "generate-badge": "coverage-badges -s coverage/coverage-summary.json -o coverage-frontend-badge-new.svg --label 'Frontend Code Coverage'",
-    "scss": "sass src/index.scss src/index.css",
-    "scss:watch": "sass src/index.scss src/index.css; sass --watch src/index.scss src/index.css",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "lint": "eslint src/**/*.{js,jsx,ts,tsx}",

frontend/src/index.tsx

@@ -1,5 +1,5 @@
-import "./index.css";
-import React, { StrictMode } from "react";
+import "./index.scss";
+import { StrictMode } from "react";
 import { createRoot } from 'react-dom/client';
 import App from "./components/App/App";
 import { initSentry } from "./config/sentry";