CSS/JS update

.gitignore

@@ -3,6 +3,7 @@
 /public/storage
 /public/css
 /public/js
+/public/build
 /storage/*.key
 /storage/debugbar
 /vendor

package.json

@@ -1,34 +1,16 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.9.0",
-        "@babel/preset-env": "^7.9.0",
-        "axios": "^0.19",
-        "babel-loader": "^8.1.0",
-        "bootstrap": "^4.5.3",
-        "cross-env": "^7.0",
-        "css-loader": "^3.4.2",
-        "dotenv": "^8.2.0",
-        "laravel-mix": "^5.0.1",
+        "axios": "^0.27",
+        "bootstrap": "^5.2.0",
+        "laravel-vite-plugin": "^0.5.0",
         "lodash": "^4.17.19",
-        "postcss-loader": "^3.0.0",
-        "resolve-url-loader": "^3.1.0",
-        "sass": "^1.27.0",
-        "sass-loader": "^10.0.3",
-        "style-loader": "^1.1.3",
-        "vue-template-compiler": "^2.6.12",
-        "webpack": "^5.1.0"
+        "postcss": "^8.1.14",
+        "sass": "^1.54.0",
+        "vite": "^3.0.0"
     }
 }

resources/sass/main.scss

@@ -1,3 +1,3 @@
 @import 'variables';
-@import '~bootstrap/scss/bootstrap.scss';
+@import 'bootstrap/scss/bootstrap.scss';
 @import 'layout';

resources/views/_layouts/app.blade.php

@@ -19,7 +19,7 @@
                 <link href="{{$feed->url}}" rel="alternate" type="application/rss+xml" title="{{$feed->title}}">
             @endforeach
         @endif
-        <link rel="stylesheet" href="/css/main.css">
+        @vite('resources/sass/main.scss')
         <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/css/lightbox.css">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic">
@@ -141,5 +141,6 @@
       </footer>
     </div>
     @stack('scripts')
+    @vite('resources/js/app.js')
   </body>
 </html>

vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: ['resources/sass/main.scss', 'resources/js/app.js'],
+            refresh: true,
+        }),
+    ],
+});

webpack.mix.js

@@ -1,15 +0,0 @@
-const mix = require('laravel-mix');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel applications. By default, we are compiling the CSS
- | file for the application as well as bundling up all the JS files.
- |
- */
-
-mix.sass('resources/sass/main.scss', 'public/css');
-mix.js('resources/js/app.js', 'public/js');