Changes for the move to NPM Webpack asset loading

Changes for the move to Webpack asset loading
Bootstrap light and dark get own CSS files still

.gitignore

@@ -57,3 +57,7 @@ fabric.properties
 # .idea/misc.xml
 # *.ipr
 storage/clockwork/
+public/css/
+public/js/
+public/fonts/
+public/webfonts/

package.json

@@ -10,23 +10,20 @@
         "production": "mix --production"
     },
     "devDependencies": {
-        "@popperjs/core": "^2.10.2",
-        "@tailwindcss/forms": "^0.4.0",
-        "alpinejs": "^3.4.2",
-        "autoprefixer": "^10.1.0",
         "axios": "^0.21.4",
-        "bootstrap": "^5.1.3",
+        "bootstrap": "^5.2.2",
+        "bootstrap-dark-5": "^1.1.3",
+        "bootstrap-data-table": "^1.0.0",
+        "jquery": "^3.6.1",
+        "datatables": "^1.10.18",
+        "font-awesome": "^4.7.0",
         "laravel-mix": "^6.0.41",
-        "lodash": "^4.17.21",
+        "vue": "^2.7.14",
-        "postcss": "^8.2.1",
+        "vue-loader": "^17.0.1",
-        "postcss-import": "^14.0.1",
-        "resolve-url-loader": "^3.1.2",
-        "sass": "^1.32.11",
-        "sass-loader": "^11.0.1",
-        "tailwindcss": "^3.0.0",
-        "vue": "^2.6.12",
-        "vue-loader": "^15.9.5",
         "vue-resource": "^1.5.3",
-        "vue-template-compiler": "^2.6.12"
+        "vue-template-compiler": "^2.7.14"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.2.0"
     }
 }

resources/css/app.css

@@ -1,3 +1,2 @@
-@import 'tailwindcss/base';
+@import '~@fortawesome/fontawesome-free/css/all.min.css';
-@import 'tailwindcss/components';
+@import "style.css";
-@import 'tailwindcss/utilities';

resources/css/dark.css

@@ -0,0 +1 @@
+@import 'bootstrap-dark-5';

resources/css/light.css

@@ -0,0 +1 @@
+@import 'bootstrap';

resources/css/style.css

@@ -0,0 +1,22 @@
+/*
+Custom styles go in here
+ */
+
+.modal-mask {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .5);
+    transition: opacity .3s ease;
+}
+
+.modal-body {
+    margin: 10px 0;
+}
+
+.modal {
+    display: contents !important;
+}

resources/js/app.js

@@ -1,6 +1,7 @@
-require('./bootstrap');
+require('bootstrap')
-import Alpine from 'alpinejs';
+require('datatables')
-
+window.Vue = require('vue/dist/vue');
-window.Alpine = Alpine;
+require('axios')
-
+import $ from 'jquery';
-Alpine.start();
+window.jQuery = $;
+window.$ = $;

webpack.mix.js

@@ -12,7 +12,8 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
-    require('postcss-import'),
+
-    require('tailwindcss'),
-    require('autoprefixer'),
 ]);
+
+mix.postCss('resources/css/light.css', 'public/css');
+mix.postCss('resources/css/dark.css', 'public/css');