Laravel 5.3，自定義Css/Js不工作

我是Laravel新手，正在研究產品。我面臨的問題是加載JS和CSS文件。Laravel 5.3，自定義Css/Js不工作

我已經把所有的CSS和JS文件資產文件夾內，訪問它們方式如下：

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

和

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>

這是確切相同的方式，因爲它工作正常使用默認的JS & css文件來與新鮮laravel安裝這樣的：

默認CSS & JS（工作）：

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

什麼我在這裏失蹤？我是否必須使用gulp並將所有js和css編譯爲默認的app.css和app.js文件？

感謝

來源

2016-11-15 z.ns

我建議使用咕嘟咕嘟來連接這些文件。如果一個文件只需要在一個頁面上，可以單獨加載。但是，如果你需要在所有頁面上的文件，將它們合併成一個文件並縮小它。這將節省您的加載時間。 – Jeff

這點到public目錄不給assets目錄，你的文件移動到public/css和public/js，使用assets DIR當你正在使用gulp。

如果您想將一些純CSS樣式表合併到一個文件中，您可以使用styles方法。通過這種方法，路徑是相對於resources/assets/css目錄，並將所得CSS將被放置在public/css/all.css：

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

爲js使用mix.scripts

來源

2016-11-15 12:53:33

這解決了這個問題！謝謝 –

添加/

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

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

來源

2016-11-15 12:21:35

我試過這個，但沒有運氣。它不加載CSS和JS。 –

Laravel 5.3，自定義Css/Js不工作

回答

相關問題