2025-07-25

frontend/package.json

@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "dev": "SASS_LOG_LEVEL=error webpack serve --config webpack.config.js"
+  },
+  "devDependencies": {
+    "css-loader": "^7.1.2",
+    "sass": "^1.89.2",
+    "sass-loader": "^16.0.5",
+    "style-loader": "^4.0.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.7"
+  }
+}

frontend/src/index.js

@@ -0,0 +1,2 @@
+import './scss/styles.scss'
+console.log("Webpack HMR loaded!");

frontend/src/scss/fonts/graphique.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Graphique';
+  src: url('./fonts/graphique.ttf') format('truetype');
+}

frontend/src/scss/styles.scss

@@ -0,0 +1,18 @@
+@use '../../node_modules/bootstrap/scss/bootstrap.scss';
+@use './fonts/graphique.css';
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@200..700&display=swap');
+
+
+
+.navbar{
+  // background-color: #582f0e;
+  @extend .border-bottom;
+  // font-family: "Bebas Neue";
+  text-transform: uppercase;
+  font-stretch: condensed;
+  .navbar-brand {
+    @extend .ms-3;
+    font-family: "Graphique";
+    font-size: x-large;
+  }
+}

frontend/webpack.config.js

@@ -0,0 +1,65 @@
+const path = require("path");
+
+module.exports = {
+  entry: ["./src/index.js"],
+  output: {
+    filename: "bundle.js",
+    path: path.resolve(__dirname, "dist"),
+    publicPath: "http://localhost:3000/dist/", // webpack-dev-server URL
+  },
+  mode: "development",
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader", // Injects styles into DOM
+          "css-loader", // Turns CSS into CommonJS
+          "sass-loader", // Compiles SCSS to CSS
+        ],
+      },
+      {
+        test: /\.(woff2?|ttf|otf|eot)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "fonts/[name][ext]",
+        },
+      },
+    ],
+  },
+  devServer: {
+    static: false,
+    hot: true,
+    port: 3000,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    proxy: [
+      {
+        context: () => true,
+        target: "http://localhost:8000",
+        changeOrigin: true,
+        secure: false,
+      },
+    ],
+  },
+  ignoreWarnings: [
+    // Ignore all warnings from a specific file (e.g., Bootstrap's Sass)
+    { message: /Deprecation Warning/ },
+    { message: /repetitive deprecation warnings/ },
+  ],
+};
+// module.exports = {
+//   // ... other webpack configurations
+//   ignoreWarnings: [
+//     // Ignore all warnings from a specific file (e.g., Bootstrap's Sass)
+//     { file: /_bootstrap\.scss$/, message: /^DEPRECATION WARNING/ },
+
+//     // Alternatively, ignore all warnings containing a specific string
+//     { message: /DEPRECATION WARNING: Sass\'s behavior for declarations/ },
+
+//     // Or, ignore warnings based on a general pattern
+//     // This example ignores all warnings from node_modules that are deprecation warnings
+//     { file: /node_modules/, message: /DEPRECATION WARNING/ },
+//   ],
+// };