z.ns z.ns - 23 days ago 15
CSS Question

Laravel 5.3, Custom Css/Js not working

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

Answer

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