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＆amp; css文件带有新的laravel安装，如下所示：

默认CSS＆amp; 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

添加/

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

Answer 2

这指向public目录而不是assets目录，将文件移至public/css和public/js，使用assets目录时gulp。

如果要将一些纯CSS样式表组合到一个文件中，可以使用styles方法。传递给此方法的路径与resources/assets/css目录相关，生成的CSS将放在public/css/all.css中：

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

js使用mix.scripts

Laravel 5.3，Custom Css / Js无效

2 个答案: