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

添加/

    <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，自定义 Css/Js 无效

Laravel 5.3, Custom Css/Js not working

javascript

css

php

laravel

laravel-5.3