2016-11-15 6 views
3

Ich bin neu bei Laravel und arbeite an einem Produkt. Das Problem, mit dem ich konfrontiert bin, ist das Laden von JS- und CSS-Dateien.Laravel 5.3, Custom Css/Js funktioniert nicht

ich die alle CSS und JS-Dateien in Assets Ordner und den Zugriff auf sie folgt gesetzt haben:

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'> 

und

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> 

Dies ist genau die gleiche Art und Weise, wie es mit der Standard-js & CSS-Dateien werden mit frischer Laravel Installation wie diese funktioniert gut:

Standard CSS & JS (in Betrieb):

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

Was Ich bin hier vermisst? Muss ich den Schluck verwenden und alle js und css in die Standarddateien app.css und app.js kompilieren?

Dank

+0

ich Gulp empfehlen, diese Dateien verketten. Wenn eine Datei nur auf einer Seite sein muss, ist es in Ordnung, sie separat zu laden. Wenn Sie jedoch Dateien auf allen Seiten benötigen, kombinieren Sie sie zu einer Datei und minimieren Sie sie. Dies spart Ihnen Ladezeit. – Jeff

Antwort

1

Dies weist auf die public dir nicht auf die assets dir, um Ihre Dateien zu public/css und public/js verschieben, verwenden assets dir wenn Sie gulp verwenden. Wenn Sie einige einfache CSS-Stylesheets in einer einzigen Datei kombinieren möchten, können Sie die styles-Methode verwenden. Wege zu diesem Verfahren geführt sind relativ zum resources/assets/css Verzeichnis und die resultierende CSS wird in public/css/all.css platziert werden:

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

für js Verwendung mix.scripts

+0

Dies löste das Problem !. Vielen Dank –

1

hinzufügen/

<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'> 

Und 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> 
+0

Ich habe das versucht aber kein Glück. Es lädt nicht css und js. –

Verwandte Themen