build scss with webpack

Author: BigSpaceships

Dockerfile

@@ -14,7 +14,7 @@ RUN npm ci
 COPY build*.js webpack.config.js /opt/conditional
 COPY frontend /opt/conditional/frontend
 
-RUN npm run build
+RUN npm run webpack
 
 FROM docker.io/python:3.12-slim-bookworm
 MAINTAINER Computer Science House <[email protected]>

build-css.js

@@ -1,36 +1,31 @@
 const { exec } = require('child_process');
 const path = require('path');
+const sass = require('sass');
+const fs = require('node:fs');
 
 // yes I know this is awkward. I want to actually use the node libraries but that gets SUBSTANTIALLY easier when node and all the dependinces are updated
 // So after I can update node and stuff I'll change this to do it in a sane way, probably in webpack
 
 const loadPaths = [
+  "./node_modules/csh-material-bootstrap/dist",
   "./node_modules/csh-material-bootstrap/dist/css",
   "./node_modules/datatables.net-bs/css",
   "./node_modules/bootstrap-material-datetimepicker/css",
-  "./node_modules/selectize-scss/src",
   "./node_modules/load-awesome/css",
   "./node_modules/reveal.js/css",
   "./node_modules",
   ".",
 ]
 
-const loadPathCommands = loadPaths.map((string) => "-I " + string);
-
-const loadPathString = loadPathCommands.join(" ");
-
 function compileFile(file) {
-  // you can use the node package but it doesn't like the version of node we're using for this rn fix later tm
-  const cmd = "sass " + loadPathString + " " + "frontend/stylesheets/" + file + ".scss" + " conditional/static/css/" + file + ".css";
-  
-  exec(cmd, (error, stdout, stderr) => {
-    console.log(`stdout: ${stdout}`);
-    console.error(`stderr: ${stderr}`);
-    if (error) {
-      console.error(`exec error: ${error}`);
-      throw error;
-    }
+  const result = sass.compile("frontend/stylesheets/" + file + ".scss", {
+    loadPaths: loadPaths,
+    importers: [
+      new sass.NodePackageImporter()
+    ],
   })
+
+  fs.writeFileSync("conditional/static/css/" + file + ".css", result.css);
 }
 
 exec("mkdir -p " + path.resolve("conditional/static/css"))

frontend/javascript/app.js

@@ -15,3 +15,6 @@ window.addEventListener('unhandledrejection', err => {
 import "jquery";
 import "bootstrap";
 import "./modules";
+
+import "../stylesheets/app.scss"
+import "../stylesheets/presentations.scss"

frontend/stylesheets/components/sweet-alert/_sweet-alert.scss

@@ -2,8 +2,10 @@
 // 2014 (c) - Tristan Edwards
 // github.com/t4t5/sweetalert
 
+@use 'pkg:csh-material-bootstrap/sass/variables';
+@import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins/vendor-prefixes';
+@import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins/forms';
 @import 'sweet-alert-animations';
-@import './node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/forms';
 // @import 'ball-fall';
 
 body {