Laravel 5.3，自定义CSS/JS无法工作

Question

我是 Laravel 的新手，正在开发一个产品。我面临的问题是加载 JS 和 CSS 文件。

我已将所有的 CSS 和 JS 文件放在 assets 文件夹中，并按以下方式访问它们：

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>

这与使用新安装的 Laravel 默认 js 和 css 文件时完全相同，如下所示：

默认的 CSS 和 JS（可用）：

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

这里我错过了什么？我需要使用gulp将所有的js和css编译成默认的app.css和app.js文件吗？

谢谢。

- z.ns

---

我建议使用Gulp来合并这些文件。如果只有一个页面需要某个文件，那么单独加载也可以。但是如果你需要在所有页面上使用这些文件，将它们合并成一个文件并进行压缩处理，这样可以节省加载时间。 - Jeff

Answer 1

添加 /

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

- Ilya Yaremchuk

---

我已经尝试过了，但没有成功。它没有加载CSS和JS。 - z.ns

Answer 2

这指向public目录而不是assets目录，将你的文件移动到public/css和public/js，当你使用gulp时使用assets目录。如果你想将一些普通的CSS样式表合并成一个文件，可以使用styles方法。传递给此方法的路径是相对于resources/assets/css目录的，生成的CSS将放置在public/css/all.css中：

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

对于 js 使用 mix.scripts

- ABDEL-RHMAN