如何在Laravel 5中包含外部CSS和JS文件

80

我正在使用Laravel 5.0，该版本中删除了Form和Html Helper，我不知道如何在我的头文件中包括外部CSS和JS文件。目前，我正在使用此代码。

<link rel="stylesheet" href="/css/bootstrap.min.css"> <!---  css file  --->
<script type="text/javascript" src="/js/jquery.min.js"></script>
php  laravel-5 
— 曼苏尔·阿赫塔尔
source
1
您可以将最重要的答案标记为答案吗？由于它是有效的信息，因此可以像您要​​求的那样工作。
— Kerwin Sneijders

Answers:

125

我认为正确的方法是：

<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>

在这里，我js在laravel的app/public文件夹中有一个目录。那里我有一个jquery.js文件。URL :: asset（）函数为您生成必要的url。对于CSS同样：

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

希望这可以帮助。

请记住，旧方法： 

{{ Form::script() }}

和

{{ Form::style() }}

已弃用，在Laravel 5中将无法使用！

— 托多尔·托多罗夫（Todor Todorov）
source
3
还要注意，Laravel 5中的资产目录与此外观无关。一秒钟让我感到困惑，URL::asset实际上是指向您的公用文件夹。
— jeanpier_re 2015年
5
恩，那就对了。您也可以使用asset()辅助方法。它执行相同的工作。
— Todor Todorov
为什么不简单地写src="/js/jquery.js"和href="https://stackoverflow.com/css/somestylesheet.css"？
— 亚当
我通常使用，asset()并且可以正常工作。有人可以解释差异吗？
— 凌晨
主要区别在于，asset()即使您从子目录访问，该添加src="/js/jquery.js"也无法正常工作，因为它总是无法在根目录下访问文件，因此无法找到那些js文件，因此
— 404s
34

尝试一下。

您可以仅将路径传递到样式表。

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

您可以将路径传递给javascript。

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

在composer.json文件的require部分中添加以下行， 然后运行composer update “ illuminate / html”：“ 5. *”。

通过将以下值添加到providers数组中，在config / app.php中注册服务提供者：

'Illuminate\Html\HtmlServiceProvider'

通过在别名数组中添加以下两行来注册外观：

'Form'=> 'Illuminate\Html\FormFacade', 'HTML'=> 'Illuminate\Html\HtmlFacade'

— 杰伊·达米里亚（Jay Dhameliya）
source
5
HTML和表单类已从Laravel 5
— Mansoor Akhtar
1
我添加了以下内容，但这将网页上的链接打印为<link media =“ all” type =“ text / css” rel =“ stylesheet” href =“ localhost / myapp / public / css / test.css ”>
— Mansoor Akhtar 2015年
1
这解决了我的问题{!! HTML :: style（'public / css / bootstrap.css'）!!}
— Mansoor Akhtar
2
HTML软件包的主动维护已由Laravel Collective接管。laravelcollective.com/docs/5.0/html
— winkbrace
我们到底要在哪里写这个，{!! HTML :: script（'js / script.js'）!!}，我遇到了js连接问题
— 者
24

在Laravel 5.1中，

 <link rel="stylesheet" href="{{URL::asset('assets/css/bootstrap.min.css')}}">
 <script type="text/javascript" src="{{URL::asset('assets/js/jquery.min.js')}}"></script>

资产文件夹位置在公用文件夹内

— 阿克沙伊（AkshayBandivadekar）
source
16

我使用这种方式，别忘了将您的CSS文件放在公用文件夹中。

例如我把我的引导css放在 

"root/public/bootstrap/css/bootstrap.min.css"

从标题访问：

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

希望这个帮助

— 多尼
source
10

将您的资产放在公共目录中并使用以下内容

URL::to()

例

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
— adhix11
source
5

首先，您必须将.css或.js文件放在public项目的文件夹中。您可以为其创建子文件夹，然后将文件移动到该子文件夹中。然后，您必须执行以下操作

<link rel="stylesheet" href="{{asset('css/your_css_file.css')}}">
<script src="{{asset('js/your_js_file.js')}}"></script>

在我的示例中，我创建了两个名为css和js的子文件夹。我将所有.css和.js文件放在相应的文件夹中，并在需要的地方使用它们。谢谢，希望对您有所帮助。

— 忠臣
source
3

好的，所以我能够弄清楚版本5.2。您首先需要在公共文件夹中创建资产文件夹，然后将css文件夹和所有css文件放入其中，然后像这样链接它：

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

希望有帮助！

— 切坦·奇特（Chetan Chitte）
source
我的CSS文件未在刀片视图中链接到。问题是我已将其与刀片视图一起放在/ resources / assets / css /中，但解决方案是我需要将其放入/ public / assets / css /中
— Andrew Koper 2016年
3

Laravel 5.5带有mix，Elixir的替代品，可以将外部css（sass）提取到资源/资产/ css（sass）并导入到app.css（scss）或提供包含以下内容的node_module文件夹的正确路径库，可以用作

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

Java脚本也可以这样做。

— Anoop D
source
我不确定，但是我认为它仅在使用Mix编译的资源（生成版本文件之后）时才有效。（laravel.com/docs/5.5/mix#sass）
— CREG
使用<link rel =“ stylesheet” href =“ {{mix（'path / file'）}}”>是5.5 laravel.com/docs/5.5/mix#versioning-and-cache-busting
— gtamborero
2

首先，您必须安装Illuminate Html帮助程序类：

composer require "illuminate/html":"5.0.*"

接下来，您需要打开/config/app.php并进行如下更新：

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

'Form' => Illuminate\Html\FormFacade::class, 
'HTML' => Illuminate\Html\HtmlFacade::class,
],

要确认其正常工作，请使用以下命令：

php artisan tinker
> Form::text('foo')
"<input name=\"foo\" type=\"text\">"

要在文件中包含外部CSS，请使用以下语法：

{!! HTML::style('foo/bar.css') !!}
— miniPax
source
他说：“ Form和HTML Helper已从此版本中删除”。但他不想使用HTML
— Helper。– MaXi32
这是一种在Laravel 5.0中重新获得支持的方法，因此使他能够使用自己惯用的语法，因为他特别声明已删除该支持，并且他不知道另一种包含外部文件的方法。
— miniPax 2015年
2

正确而安全的方式

如果您有外部.css或.js文件要添加到页面中！

我的版本：Laravel Framework 5.7

如果要添加外部.js文件。

  1. 复制您的外部代码。
  2. npm install在终端中运行命令。
  3. 执行以上命令后，您会看到一个名为的文件夹node_modules。
  4. 然后转到resources / js。
  5. 打开文件app.js。
  6. 向下滚动到底部，然后粘贴您的外部JS。
  7. 最后npm run dev在终端中运行命令。

您的脚本将被更新，编译并移至public/js/app.js。.js在公用文件夹中添加文件不会对您的页面产生影响。

如果要添加外部.css文件。

  1. 复制您的外部样式。
  2. npm install在终端中运行命令。
  3. 执行以上命令后，您会看到一个名为的文件夹node_modules。
  4. 然后去资源/萨斯。
  5. 打开文件app.scss。
  6. 向下滚动到底部，然后粘贴您的外部样式。
  7. 最后npm run dev在终端中运行命令。

您的脚本将被更新，编译并移至public/css/app.css。.css在公用文件夹中添加文件不会对您的页面产生影响。

  • 添加外部.css和.js的最简单，最安全的方法。

Laravel JavaScript和CSS支架

YouTube编译资产

— 阿罕默德·拉希德（Ahamed Rasheed）
source
1

我可能参加聚会的时间很晚，但是很容易通过仅使用asset（）函数来包含Laravel方式的JS和CSS

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

希望能有所帮助

— 瑞安·S
source
1

我一直在利用 

<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script> 
for javascript and 
     <link rel="stylesheet" href="{{ URL::asset('css/main.css') }}">
for css, this points to the public directory, so you need to keep your css and js files there.
— 菲尔茨
source
0

有很多方法可以包含下面的代码中指定的外部css和js文件，但是您可以选择其中一种，我已经对其进行了全部测试，它们的工作原理相同。

<link rel="stylesheet" href="{{ asset('css/stylesheet.css') }}" /><!--Recommended-->
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
<link rel="stylesheet" href="{{ URL::to('css/otherstylesheet.css') }}" />
<link rel="stylesheet" href="{{ url('css/anotherstylesheet.css') }}" />

也许有更多的方法来加载它。

但是请记住，如果从公共文件夹之外的其他位置加载css和js，则更好用Laravel mix。

— 哈里辛·戈希尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.