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

和

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 文件？

谢谢

Answer 1

这指向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

Answer 2

添加/

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