Laravel 5.3, Custom Css/Js not working

Question

I am new to Laravel and working on a product. The issue I am facing is with loading JS and CSS files.

I have placed all the CSS and JS files inside assets folder and accessing them following way :

CSS :

 <link href="{{asset('css/bootstrap.min.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('css/bootstrap-select.css')}}">
<!--    Font Awesome CSS   -->
<link href="{{asset('css/font-awesome.min.css')}}" rel='stylesheet' type='text/css'>
<link href="{{asset('css/ionicons.css')}}" rel="stylesheet" type="text/css">
<!-- Owl carousel -->
<link href="{{asset('css/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/owl.theme.css')}}" rel="stylesheet">
<link href="{{asset('css/owl.transitions.css')}}" rel="stylesheet" type="text/css">
<!--    Custome CSS   -->
<link rel="stylesheet" href="{{asset('css/nanoscroller.css')}}" type='text/css'>
<link href="{{asset('css/jquery.bxslider.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('css/menu.css')}}">
<link href="{{asset('css/all.css')}}" rel='stylesheet' type='text/css'>

and

JS :

<!-- JS   -->
<script src="{{asset('js/jquery-1.12.0.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/bootstrap-select.js')}}"></script>
<script type="text/javascript" src="{{asset('js/jquery.nanoscroller.js')}}">    </script>
<script defer src="{{asset('js/bx.js')}}"></script>
<script src="{{asset('js/jquery.mobile.custom.min.js')}}"></script>
<script src="{{asset('js/menu.js')}}"></script> 
<script src="{{asset('js/owl.carousel.js')}}" type="text/javascript">    </script>
<script src="{{asset('js/custom.js')}}"></script>

This is exact the same way as it was working fine with the default js & css files come with fresh laravel installation like this :

Default CSS & JS (working) :

  <link href="{{asset('/css/app.css')}}" rel="stylesheet">
 <script src="{{asset('/js/app.js')}}"></script>

What I am missing here ? Do I have to use the gulp and compile all of js and css into default app.css and app.js files ?

Thanks

I recommend using Gulp to concatenate these files. If a file only needs to be on one page, it is ok to load separately. But if you need files on all pages, combine them into one file and minify it. This will save you loading time. — Jeff
– Jeff, Commented Nov 15, 2016 at 12:27

ABDEL-RHMAN · Accepted Answer · 2016-11-15 12:53:33Z

1

This points to the public dir not to the assets dir, move your files to public/css and public/js, use assets dir when your are using gulp.

If you would like to combine some plain CSS stylesheets into a single file, you may use the styles method. Paths passed to this method are relative to the resources/assets/css directory and the resulting CSS will be placed in public/css/all.css :

elixir(function(mix) {
    mix.styles([
        'normalize.css',
        'main.css'
    ]);
});

for js use mix.scripts

answered Nov 15, 2016 at 12:53

ABDEL-RHMAN

3,05419 silver badges24 bronze badges

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

Comments

Illia Yaremchuk · Accepted Answer · 2016-11-15 12:21:35Z

Add /

    <link href="{{asset('/css/bootstrap.min.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('/css/bootstrap-select.css')}}">
<!--    Font Awesome CSS   -->
<link href="{{asset('/css/font-awesome.min.css')}}" rel='stylesheet' type='text/css'>
<link href="{{asset('/css/ionicons.css')}}" rel="stylesheet" type="text/css">
<!-- Owl carousel -->
<link href="{{asset('/css/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('/css/owl.theme.css')}}" rel="stylesheet">
<link href="{{asset('/css/owl.transitions.css')}}" rel="stylesheet" type="text/css">
<!--    Custome CSS   -->
<link rel="stylesheet" href="{{asset('/css/nanoscroller.css')}}" type='text/css'>
<link href="{{asset('/css/jquery.bxslider.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('/css/menu.css')}}">
<link href="{{asset('/css/all.css')}}" rel='stylesheet' type='text/css'>

And JS

<script src="{{asset('/js/jquery-1.12.0.min.js')}}"></script>
<script src="{{asset('/js/bootstrap.min.js')}}"></script>
<script src="{{asset('/js/bootstrap-select.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/jquery.nanoscroller.js')}}">    </script>
<script defer src="{{asset('/js/bx.js')}}"></script>
<script src="{{asset('/js/jquery.mobile.custom.min.js')}}"></script>
<script src="{{asset('/js/menu.js')}}"></script> 
<script src="{{asset('/js/owl.carousel.js')}}" type="text/javascript">    </script>
<script src="{{asset('/js/custom.js')}}"></script>

I have tried this but no luck. It is not loading css and js.

Collectives™ on Stack Overflow

Laravel 5.3, Custom Css/Js not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related