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

【问题标题】：How to include External CSS and JS file in Laravel 5如何在 Laravel 5 中包含外部 CSS 和 JS 文件
【发布时间】：2015-03-22 04:16:21
【问题描述】：

我正在使用 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

【解决方案1】：

我认为正确的方法是这个：

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

这里我在 laravel 的 app/public 文件夹中有一个 js 目录。我有一个jquery.js 文件。函数 URL::asset() 为您生成必要的 url。 css 也一样：

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

希望这会有所帮助。

记住旧方法：

{{ Form::script() }}

和

{{ Form::style() }}

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

【讨论】：

另请注意，Laravel 5 中的 assets 目录与此外观无关。这让我有些困惑，URL::asset 会直接指向您的公用文件夹。
是的，没错。您还可以使用asset() 辅助方法。它做同样的工作。
为什么不直接写src="/js/jquery.js"和href="/css/somestylesheet.css"？
我通常使用asset()，它可以工作。有人能解释一下区别吗？
主要区别在于，asset() 即使您从子目录访问也可以工作，因为添加 src="/js/jquery.js" 不起作用，因为它总是希望文件位于根级别，而这些 js 文件不会因此发现 404s

【解决方案2】：

试试看。

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

{!! 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'

通过在 aliases 数组中添加这两行来注册外观：

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

【讨论】：

从 Laravel 5 中删除了 HTML 和表单类
我添加了以下内容，但这是将网页上的链接打印为 localhost/myapp/public/css/test.css">
这解决了我的问题{!! HTML::style('public/css/bootstrap.css') !!}
对 HTML 包的积极维护已由 Laravel 集体接管。 laravelcollective.com/docs/5.0/html
我们要在哪里写这个，{!! HTML::script('js/script.js') !!}，我有js连接问题

【解决方案3】：

在 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>

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

【讨论】：

【解决方案4】：

我用这种方式，别忘了把你的css文件放到public文件夹里。

例如我把我的引导 css 放在

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

从标题访问：

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

希望有帮助

【讨论】：

【解决方案5】：

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

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>

【讨论】：

【解决方案6】：

{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}

【讨论】：

怎么来的？你试过使用URL::asset() or app_path() 吗？
这解决了我的问题感谢 {{asset('public/css/bootstrap.css') }}
不是HTML，而是Html。

【解决方案7】：

首先，您必须将.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 文件放在相应的文件夹中，并在我想要的任何地方使用它们。谢谢您，希望对您有所帮助。

【讨论】：

【解决方案8】：

有很多方法可以包含以下代码中指定的外部 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。

【讨论】：

【解决方案9】：

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

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

希望有帮助！

【讨论】：

我的 CSS 文件未在刀片视图中链接到。问题是我用刀片视图把它放在 /resources/assets/css/ 中，但解决方案是我需要把它放在 /public/assets/css/

【解决方案10】：

Laravel 5.5 自带 mix ，替代 Elixir，外部 css(sass) 可以提取到 resources/assets/css(sass) 并导入到 app.css(scss) 或者给你的 node_module 文件夹提供正确的路径包含库并且可以用作

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

Javascript 也可以这样做。

【讨论】：

我不确定，但我认为它只有在使用 Mix 编译资源时才有效（在生成版本化文件之后）。 (laravel.com/docs/5.5/mix#sass)
使用是 5.5 上的新方法laravel.com/docs/5.5/mix#versioning-and-cache-busting

【解决方案11】：

首先你必须安装 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') !!}

【讨论】：

他说：“Form 和 Html Helper 从这个版本中被移除了”。不过他不想使用 HTML Helper..
这是一种在 Laravel 5.0 中重新获得该支持的方法，从而使他能够使用他习惯的语法，因为他特别声明该支持已被删除并且他不知道其他支持包含外部文件的方法。

【解决方案12】：

正确且安全的方式

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

我的版本：Laravel Framework 5.7

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

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

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

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

复制您的外部样式。
在终端中运行命令npm install。
执行上述命令后，可以看到名为node_modules的文件夹。
然后转到 resources/sass。
打开文件app.scss。
向下滚动到底部并粘贴您的外部样式。
最后在终端运行命令npm run dev。

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

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

Laravel JavaScript & CSS Scaffolding

YouTubeCompiling Assets

【讨论】：

【解决方案13】：

我可能迟到了，但是很容易通过简单地使用asset() 函数来包含 JS 和 CSS 的 Laravel 方式

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

希望有帮助

【讨论】：

【解决方案14】：

我一直在使用

<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.

【讨论】：