Setup project to be able to minify css and javascript. Now the development can commence

package.json

@@ -11,7 +11,7 @@
     },
     "devDependencies": {
         "axios": "^0.18",
-        "bootstrap": "^4.0.0",
+        "bootstrap": "^3.4.1",
         "cross-env": "^5.1",
         "jquery": "^3.2",
         "laravel-mix": "^2.0",
@@ -19,5 +19,9 @@
         "lodash": "^4.17.5",
         "popper.js": "^1.12",
         "vue": "^2.5.7"
+    },
+    "dependencies": {
+        "bootstrap-sass": "^3.4.1",
+        "postcss-loader": "^3.0.0"
     }
 }

resources/js/components/Employee/createEmployee.vue

@@ -162,7 +162,8 @@
                 </div>
             </div>
         </div>
-        <button type="submit" class="btn btn-primary" v-on:click.prevent="sendForm">Save changes <i class="fa fa-save"></i></button>
+        <button type="submit" class="btn btn-primary" v-on:click.prevent="sendForm">Save changes
+            <i :class="{'fa fa-spin fa-spinner':saving}"></i></button>
     </form>
 </template>
 
@@ -183,13 +184,16 @@
                 nssf: '',
                 employmentdate: '',
                 yearsofexperience: '',
+                saving: false
             }
         },
         methods: {
             sendForm() {
-                axios.post('/employees',this.$data).then(resp=>{
-
-                }).catch(err=>{
+                this.saving = true;
+                axios.post('/employees', this.$data).then(resp => {
+                    this.saving = false;
+                }).catch(err => {
+                    this.saving = false;
                     this.errors = err.response.data.errors;
                 })
 

resources/sass/app.scss

+@import "~bootstrap-sass/assets/stylesheets/bootstrap";
+@import "animate.css";
+//@import "./font-awesome.min.css";
+//@import "./font.css";
 html {
   background-color: #f7f7f7;
   overflow-x: hidden;

resources/views/Layout/Employeesmaster.blade.php

@@ -6,12 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <link rel="shortcut icon" href="{{ asset('images/favicon.ico') }}">
-    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css"/>
-    <link rel="stylesheet" href="{{ asset('css/animate.css') }}" type="text/css"/>
-    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" type="text/css"/>
-    <link rel="stylesheet" href="{{ asset('css/font.css') }}" type="text/css"/>
-    <link rel="stylesheet" href="{{ asset('js/calendar/bootstrap_calendar.css') }}" type="text/css"/>
     <link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css"/>
+    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" type="text/css"/>
     <!--[if lt IE 9]>
     <script src="/js/ie/html5shiv.js"></script>
     <script src="/js/ie/respond.min.js"></script>
@@ -267,9 +263,6 @@
 <script src="{{asset('js/bootstrap.js')}}"></script>
 <script src="{{ asset('js/app.js') }}"></script>
 <!-- App -->
-<script src="{{asset('js/app.kinetic.js')}}"></script>
-<script src="{{asset('js/slimscroll/jquery.slimscroll.min.js')}}"></script>
-<script src="{{asset('js/sortable/jquery.sortable.js')}}"></script>
-<script src="{{asset('js/app.plugin.js')}}"></script>
+{{--<script src="{{asset('js/app.kinetic.js')}}"></script>--}}
 </body>
 </html>
\ No newline at end of file

webpack.mix.js

 const mix = require('laravel-mix');
-
+require('laravel-mix-purgecss');
 /*
  |--------------------------------------------------------------------------
  | Mix Asset Management