Laravel Vuejs Custom Css & Js files

Question

I am creating a Laravel Vuejs application with a custom theme and cannot get the css and js files to load. Need some help please.

So I did the same tutorial using AdminLTE and it worked. So I decided to use a third party theme.These are the steps I did after a lot of research:

1) Moved all the asset files into the resources folder maintaining the original folder structure. Original HTML File had:

<link rel="stylesheet" 
href="../assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font- 
awesome.min.css">
<link rel="stylesheet" href="../assets/vendor/animate-css/vivify.min.css">
<link rel="stylesheet" href="../assets/vendor/c3/c3.min.css"/>
<link rel="stylesheet" href="../assets/vendor/bootstrap- 
datepicker/css/bootstrap-datepicker3.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="../html/assets/css/site.min.css">
......
<script src="../html/assets/bundles/libscripts.bundle.js"></script>
<script src="../html/assets/bundles/vendorscripts.bundle.js"></script>
<script src="../html/assets/bundles/c3.bundle.js"></script>
<script src="../assets/vendor/bootstrap-datepicker/js/bootstrap- 
datepicker.min.js"></script>
<script src="../html/assets/bundles/mainscripts.bundle.js"></script>
<script src="../html/assets/js/index8.js"></script>

2) In webpack.mix.js, I added:

mix.js('resources/js/app.js', 'public/js')
   .js([
    'resources/assets/bundles/libscripts.bundle.js',
    'resources/assets/bundles/vendorscripts.bundle.js',
    'resources/assets/bundles/c3.bundle.js',
    'resources/assets/vendor/bootstrap-datepicker/js/bootstrap- 
    datepicker.min.js',
    'resources/assets/bundles/mainscripts.bundle.js',
    'resources/assets/js/index8.js'
   ], 'public/js/all.js')
 .sass('resources/sass/app.scss', 'public/css')
 .styles([
    'resources/assets/css/vendor/bootstrap/css/bootstrap.min.css',
    'resources/assets/css/vendor/font-awesome/css/font-awesome.min.css',
    'resources/assets/css/vendor/animate-css/vivify.min.css',
    'resources/assets/css/vendor/c3/c3.min.css',
    'resources/assets/css/vendor/bootstrap-datepicker/css/bootstrap- 
     datepicker3.min.css',
     'resources/assets/css/site.min.css' 
   ], 'public/css/all.css');

3) Ran npm run dev. No errors. Replaced the old css and js files with mixed ones in the html code:

 <link rel="stylesheet" href="/css/all.css">
 <script src="/js/all.js"></script>

4) Opened the application and all I got was the loading spinner that would not stop. When I removed the spinner code from the html all i got was the theme with a very broken css and jss.

Really need help with this or maybe an alternative. Thanks in advance.

Feroj Bepari · Accepted Answer · 2019-10-21 08:55:21Z

1

Here public/js/app.js is missing in the all.js as well as in the all.css. Please use the following codes:

mix.js('resources/js/app.js', 'public/js')
   .js([
    'resources/assets/bundles/libscripts.bundle.js',
    'resources/assets/bundles/vendorscripts.bundle.js',
    'resources/assets/bundles/c3.bundle.js',
    'resources/assets/vendor/bootstrap-datepicker/js/bootstrap- 
    datepicker.min.js',
    'resources/assets/bundles/mainscripts.bundle.js',
    'resources/assets/js/index8.js',
    'public/js/app.js'
   ], 'public/js/all.js')
 .sass('resources/sass/app.scss', 'public/css')
 .styles([
    'resources/assets/css/vendor/bootstrap/css/bootstrap.min.css',
    'resources/assets/css/vendor/font-awesome/css/font-awesome.min.css',
    'resources/assets/css/vendor/animate-css/vivify.min.css',
    'resources/assets/css/vendor/c3/c3.min.css',
    'resources/assets/css/vendor/bootstrap-datepicker/css/bootstrap- 
     datepicker3.min.css',
     'resources/assets/css/site.min.css',
     'public/css/app.css' 
   ], 'public/css/all.css');

answered Oct 21, 2019 at 8:55

Feroj Bepari

4444 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1404396 Over a year ago

Hi. I tried that but I am still getting the same broken css and js files on the application.

user1404396 Over a year ago

The theme i am using is themeforest.net/item/… . It is free from themeforest. Any chance you can have a look for me.

Collectives™ on Stack Overflow

Laravel Vuejs Custom Css & Js files

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related