Laravel CSS 和 Bootstrap 不起作用答案

【问题标题】：Laravel CSS and Bootstrap doesn't workingLaravel CSS 和 Bootstrap 不起作用
【发布时间】：2021-10-03 10:51:21
【问题描述】：

我创建了一个新的 Laravel 项目并下载了 bootstrap CSS 和 JS 文件，并将 CSS 文件放在 resources/css 中，并将 bootstrap 和 popper 的 JS 文件以及 jQuery 放在 resources/js 和我链接的welcome.blade.php 中像这样的CSS文件和JS文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Osama The Coder</title>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>

<body>
    <section class="text-danger">
        Hello World
    </section>

    <script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ asset('js/popper.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>

</html>

当我打开项目时，它只是没有任何样式或 Bootstrap 字体系列的文本即使我链接了 app.css 并将红色应用于部分元素，我也没有看到任何变化

【问题讨论】：

标签： php laravel backend

【解决方案1】：

请按照以下步骤操作

把你所有的静态资源放到公共目录中
将您的资产组织在不同的文件夹中，例如 public/js 用于 js 相关文件，public/css 用于 css 相关文件

然后使用下面的帮助方法访问您的文件

<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
/* or js files */
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>

【讨论】：

它工作得很好，但你能解释一下为什么它不能在以前工作吗？
这基本上是由于HOST_URL。 HOST_URL 是我们的主根 index.php 文件所在的位置。默认情况下，它放在 public/index.php 文件中，因此我们的 HOST_URL 变为 localhost:8000/public 但根据 .htaccess 文件中设置的规则，我们不需要使用 /public 因为它是忽略的，所以我们可以使用 @987654322 @ 直接访问公共目录。如果您打印 {{asset('')}} ，那么您将获得相同的 HOST_URL 而无需公开。从此以后，我们可以轻松地使用资产助手方法定位公共目录中的所有文件