laravel 8 没有加载 css 和 js/bootstrap
Posted
技术标签:
【中文标题】laravel 8 没有加载 css 和 js/bootstrap【英文标题】：laravel 8 is not loading css and js/bootstrap 【发布时间】：2021-08-16 23:30:45 【问题描述】：我不知道为什么，这不是我在 laravel 中的第一个项目，但我的 css 无法正常工作，我在代码中找不到任何问题，也许我很累或其他什么，但这让我陷入困境大约 10 小时。
似乎我的 CSS 无法正常工作，为什么？我不知道，我的所有文件夹都在公用文件夹中，而我的网站看起来一点也不像模板。
<link href=" asset ('animate.css/animate.css') '" rel="stylesheet" type="text/css" />
<link href=" asset ('fontawesome/css/all.css') " rel="stylesheet" type="text/css" />
<link href=" asset ('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700') " rel="stylesheet" />
<link href=" asset ('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800,900') " rel="stylesheet" />
<link href=" asset ('chosen/chosen.min.css') " rel="stylesheet" type="text/css" />
<link href=" asset ('jquery-ui-custom/jquery-ui.min.css') " rel="stylesheet" type="text/css">
<link href=" asset ('pentix/css/pentix.css') " rel="stylesheet" type="text/css">
<link href=" asset ('css/pex-theme.css') " rel="stylesheet" type="text/css">
当我使用 CTRL + U 时，我在终端中也没有看到任何错误，所有 CSS 链接都打开了。
【问题讨论】：
ctrl-u 只显示源代码，对吧？试试F12（你浏览器的开发者工具）
以防万一，我会删除asset 和文件位置之间的空格。
当我按 f12 GET localhost/APCService/public/animate.css/animate.css' net::ERR_ABORTED 404 (Not Found) 时似乎出现此错误，但文件位于特定文件夹“animate.css”@brombeer 中跨度>
@Bennett 我做到了，没有改变
看起来您的服务器设置不正确。您使用的是哪个服务器？尝试使用php artisan serve 运行您的网站，看看是否可行。 /public/ 不应出现在 URL 中，它应该是您服务器的“DocumentRoot”
【参考方案1】：
<link href=" public_path ('animate.css/animate.css') '" rel="stylesheet" type="text/css" />
<link href=" public_path ('fontawesome/css/all.css') " rel="stylesheet" type="text/css" />
<link href=" public_path ('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700') " rel="stylesheet" />
<link href=" public_path ('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800,900') " rel="stylesheet" />
<link href=" public_path ('chosen/chosen.min.css') " rel="stylesheet" type="text/css" />
<link href=" public_path ('jquery-ui-custom/jquery-ui.min.css') " rel="stylesheet" type="text/css">
<link href=" public_path ('pentix/css/pentix.css') " rel="stylesheet" type="text/css">
<link href=" public_path ('css/pex-theme.css') " rel="stylesheet" type="text/css">【讨论】：
【参考方案2】：使用下面的代码：
<link href="asset('animate.css/animate.css')" rel="stylesheet" type="text/css">
<link href="asset('fontawesome/css/all.css')" rel="stylesheet" type="text/css">
<link href="asset('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700')" rel="stylesheet" type="text/css">
<link href="asset('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800,900')" rel="stylesheet" type="text/css">
<link href="asset('chosen/chosen.min.css')" rel="stylesheet" type="text/css">
<link href="asset('jquery-ui-custom/jquery-ui.min.css')" rel="stylesheet" type="text/css">
<link href="asset('pentix/css/pentix.css')" rel="stylesheet" type="text/css">
<link href="asset('css/pex-theme.css')" rel="stylesheet" type="text/css">
【讨论】：
【参考方案3】：在 laravel 中链接脚本和 css 的正确语法是：
link rel="stylesheet" href="asset('new_assets/assets/css/style.css')"
我在我的 laravel 项目中使用了它，我的 css 文件位于“new_assets/assets/css/style.css”中。 两个开头的花括号中的第一个“资产”词指向 laravel/public 文件夹。确保当您使用 asset('some path') 时，css 或文件/文件夹在公共文件夹。
【讨论】：
我所有的 css 文件夹都是公开的，这就是我使用这个 asset('some path') 的原因。我像你说的那样改变了语法，但没有改变【参考方案4】：我的建议
<link href=" asset ('animate.css/animate.css') " rel="stylesheet" type="text/css" />
<link href=" asset ('fontawesome/css/all.css') " rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800,900" rel="stylesheet" />
<link href=" asset ('chosen/chosen.min.css') " rel="stylesheet" type="text/css" />
<link href=" asset ('jquery-ui-custom/jquery-ui.min.css') " rel="stylesheet" type="text/css">
<link href=" asset ('pentix/css/pentix.css') " rel="stylesheet" type="text/css">
<link href=" asset ('css/pex-theme.css') " rel="stylesheet" type="text/css">
你的第一个资产 css 中有额外的 '
mate.css') '"
如果任何 js 或 css 不起作用，只需检查 url 之类的尝试
http://localhost:8000/animate.css/animate.css
并使用php artisan serv 运行 laravel 应用程序
【讨论】：
以上是关于laravel 8 没有加载 css 和 js/bootstrap的主要内容，如果未能解决你的问题，请参考以下文章
基本 JS 文件加载但不渲染或执行 Laravel 8 Bootstrap 5
CSS 不会在 XAMPP 上的 Laravel 8 + Jetstream 中加载
当我使用 ngrok 加载我的 Laravel 应用程序时，它只显示基本的 html 而没有 css
Laravel 8，使用 Tailwind CSS 安装 React.js
我正在使用 Bootstrap 和 Tailwind CSS 开发 Laravel。我的tailwindcss没有被选中