Use webpack

LANCommander.Server/LANCommander.Server.csproj

@@ -48,7 +48,7 @@
 
 	<Target Name="CompileGlobalSass" BeforeTargets="Compile">
 		<Message Text="Compiling global SCSS files" Importance="high" />
-		<Exec Command="npm run sass" />
+		<Exec Command="npm run package" />
 	</Target>
 
 	<ItemGroup>

LANCommander.Server/package.json

@@ -4,7 +4,7 @@
   "description": "The admin UI for the LANCommander digital game distribution platform",
   "main": "index.js",
   "scripts": {
-    "sass": "sass Styles:wwwroot/css"
+    "package": "webpack"
   },
   "repository": {
     "type": "git",
@@ -17,6 +17,12 @@
   },
   "homepage": "https://github.com/LANCommander/LANCommander#readme",
   "devDependencies": {
-    "sass": "^1.80.3"
+    "cli-loader": "^1.1.1",
+    "css-loader": "^7.1.2",
+    "mini-css-extract-plugin": "^2.9.2",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1"
   }
 }

LANCommander.Server/webpack.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+    entry: ['./Styles/app.scss'], // Adjust the path if your index.js is located elsewhere
+    module: {
+        rules: [
+            {
+                test: /\.(css)$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: { sourceMap: true }
+                    }
+                ],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                        MiniCssExtractPlugin.loader,
+                        {
+                            loader: 'css-loader',
+                            options: { sourceMap: true }
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: { sourceMap: true }
+                        }
+                    ],
+            }
+        ],
+    },
+    output: {
+        path: path.resolve(__dirname, 'wwwroot', 'css'), // The output directory
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: "app.css"
+        })
+    ],
+    mode: 'production', // Use 'production' for minified output
+    devtool: 'source-map'
+};