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

Posted 2023-02-24

【中文标题】Laravel 5.3，自定义 Css/Js 不工作

【英文标题】：Laravel 5.3, Custom Css/Js not working

【发布时间】：2017-03-29 07:53:25

【问题描述】：

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

谢谢

【问题讨论】：

我推荐使用 Gulp 来连接这些文件。如果一个文件只需要在一页上，单独加载是可以的。但是，如果您需要所有页面上的文件，请将它们合并为一个文件并缩小它。这将节省您的加载时间。

【参考方案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

【参考方案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>

【讨论】：

我已经尝试过了，但没有运气。它没有加载css和js。