Laravel样式表和javascript不会加载非基本路由

Question

好的 - 我知道这是一个非常基本的问题,但我无法弄清楚.这是关于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 - 当然这不是一个文件夹.

我只是想让它在同一个地方寻找资产而不管路线.

Answer 1

对于Laravel 4和5:

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

URL::asset将链接到您的project/public/文件夹,所以在那里扔你的脚本.

^{注意:为此,您需要使用" 刀片模板引擎 ".刀片文件使用.blade.php扩展名.}

Answer 2

Laravel 4

这样做的更好,更正确的方法

添加CSS

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

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

添加JS

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

{{ HTML::script('js/script.js') }}

Answer 3

您正在使用资产的相对路径,更改为绝对路径,一切都将正常工作(在"css"之前添加斜杠.

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

Answer 4

我认为你正在使用Laravel 3,如果是的话将你的CSS/JS文件放在公共文件夹中

public/css
public/js

并使用Blade模板调用它

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}

Answer 5

在Laravel 5中,
有两种方法可以在视图中加载js文件,
第一种是使用html helper,第二种是使用资产助手.
要使用html helper,你必须先通过命令行安装这个包:

composer require illuminate/html

然后你需要重新安装它,所以转到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文件

Answer 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管理资产文档