104

好的——我知道这是一个非常基本的问题，但我无法弄清楚。这是一个关于 Laravel 的问题。

基本上，我将样式表嵌入到我的默认布局视图中。我目前只是使用常规 css 来链接它们，例如：

<link rel="stylesheet" href="css/app.css" />

当我在单层路线（例如/about ）时它工作得很好，但当我更深入时停止工作，例如/about/me。

如果我查看 Chrome 的开发者控制台，我会看到以下一些错误（仅针对更深层次的路线）：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

很明显，它现在正在寻找“about”文件夹中的 css——当然这根本不是一个文件夹。

无论路线如何，我只想让它在同一个地方寻找资产。

4

19 回答 19

174

对于 Laravel 4 和 5：

<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.min.css') }}">

URL::asset将链接到您的project/public/文件夹，因此请将您的脚本放在那里。

注意：为此，您需要使用“刀片模板引擎”。Blade 文件使用.blade.php扩展名。

于 2013-05-15T12:58:11.933 回答
53

拉拉维尔 4

更好和正确的方法来做到这一点

添加 CSS

HTML::style 将链接到您的 project/public/ 文件夹

{{ HTML::style('css/bootstrap.css') }}

添加JS

HTML::script 将链接到您的 project/public/ 文件夹

{{ HTML::script('js/script.js') }}
于 2013-09-29T13:50:03.717 回答
13

您正在为您的资产使用相对路径，更改为绝对路径，一切都会正常工作（在“css”之前添加一个斜杠。

<link rel="stylesheet" href="/css/app.css" />
于 2013-03-05T20:50:27.907 回答
10

在 Laravel 5中，
有两种方法可以在视图中加载 js 文件，
第一种是使用 html 助手，第二种是使用资产助手。
要使用 html 助手，您必须首先通过命令行安装此包：

composer require illuminate/html

那么你需要reqister它，所以去config/app.php，并将这一行添加到providers数组中

'Illuminate\Html\HtmlServiceProvider'

然后你必须为你的 html 包定义别名，所以去 config/app.php 中的别名数组并添加这个

'Html'     => 'Illuminate\Html\HtmlFacade'

现在您的 html 助手已安装，因此您可以在刀片视图文件中编写以下代码：

{!! Html::script('js/test.js') !!}

这将在您的 project_root/public/js/test.js 中查找您的 test.js 文件。
///////////////////////////////////////// ///////////
要使用资产助手而不是html助手，你必须在你的视图文件中这样写：

<script src="{{ URL::asset('test.js') }}"></script>

这将在 project_root/resources/assets/test.js 中查找 test.js 文件

于 2015-05-03T07:42:08.010 回答
9

如果你在公共文件夹中使用 Laravel 3 和你的 CSS/JS 文件，像这样

public/css
public/js

然后你可以像这样在 Blade 模板中调用它们

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}
于 2013-03-05T20:47:05.373 回答
6

我建议你在 {project}/application/routes.php 之前把它放在路由过滤器上

Route::filter('before', function()
{
    // Do stuff before every request to your application...    
    Asset::add('jquery', 'js/jquery-2.0.0.min.js');
    Asset::add('style', 'template/style.css');
    Asset::add('style2', 'css/style.css');

});

并使用刀片模板引擎

{{ Asset::styles() }}
{{ Asset::scripts(); }}

或更多关于laravel 管理资产文档

于 2013-05-22T04:16:53.160 回答
3

你laravel 4只需要这样粘贴{{ URL::asset('/') }}： 

  <link rel="stylesheet" href="{{ URL::asset('/') }}css/app.css" />.

对于以下情况也是如此：

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">
于 2014-03-12T07:46:39.073 回答
3

带有混合助手的 Laravel 5.4：

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"> </script>
于 2017-04-01T00:08:43.683 回答
3

在 Laravel 5.7 中，将您的 CSS 或 JS 文件放入 Public 目录。

对于 CSS：

<link rel="stylesheet" href="{{ asset('bootstrap.min.css') }}">

对于 JS：

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>
于 2018-11-14T12:01:04.460 回答
2

我认为最好的方法是在你的 HTML 中添加 BASE 标签

<base href="/" target="_top">

所以没有必要使用类似的东西

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

只需键入

<script src="js/jquery/jquery-1.11.1.min.js"></script>

在您看来，它会起作用。

此方法将处理 RESTful URL 和静态资源作为图像、css、脚本。

于 2014-11-01T23:34:01.957 回答
2

Vinsa 几乎是对的，您应该添加 

<base href="{{URL::asset('/')}}" target="_top">

并且脚本应该进入它们的常规路径

<script src="js/jquery/jquery-1.11.1.min.js"></script>

这是因为如果没有附加基本路径，图像和其他具有相对路径的东西（如图像源或 ajax 请求）将无法正常工作。

于 2016-01-06T10:44:36.987 回答
1

如果您对其进行硬编码，您可能应该使用完整路径 ( href="http://example.com/public/css/app.css")。但是，这意味着您必须手动调整用于开发和生产的 URL。

上述解决方案的替代方案是<link rel="stylesheet" href="URL::to_asset('css/app.css')" />在 Laravel 3 或<link rel="stylesheet" href="URL::asset('css/app.css')" />Laravel 4 中使用。这将允许您以您想要的方式编写 HTML，但也让 Laravel 在任何环境中为您生成正确的路径。

于 2013-03-06T06:15:58.427 回答
1

只需添加另一个问题：

如果你想/public从你的项目中删除.htaccess，

那么你可以使用这个，[Add publicbefore /cssinside asset()]

<link href="{{ asset('public/css/app.css') }}" rel="stylesheet">

[有时，它很有用。]

于 2017-10-20T01:56:44.790 回答
1

更好的使用方式，

<link rel="stylesheet" href="{{asset('assets/libraries/css/app.css')}}">
于 2017-05-09T11:24:18.380 回答
1

假设您没有重命名您的公用文件夹。您的 css 和 js 文件位于公共文件夹的 css 和 js 子文件夹中。现在你的标题将是：

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>
于 2017-05-30T03:45:24.230 回答
0

将您的脚本文件放在公共目录中，然后使用（例如 userFunctions.js）

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">
于 2019-07-28T08:33:01.600 回答
0

对于 Laravel 4：{！！对于双花括号 { {
和 Laravel 5 及以上版本：您可以替换 {!! 由 {{ and !!} by }} 在高端版本中

如果您已将 JavaScript 放置在自定义目录中。
例如，如果您jQuery-2.2.0.min.js被放置在目录下，resources/views/admin/plugins/js/那么*.blade.php您将能够在该部分的末尾添加为

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

由于高端版本也支持低端版本，但反之亦然

于 2018-08-20T10:35:21.677 回答
0

在 Laravel 5.8 中

<script src="{{asset('js/customPath1/customPath2/customjavascript.js')}}"></script>

只是为我做了伎俩。

于 2019-07-13T20:08:00.860 回答
0

更好和正确的方法：

<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
于 2019-03-29T10:22:01.750 回答