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

时间：2015-01-23 06:58:43

标签： php laravel-5

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

14 个答案:

答案 0 :(得分：113)

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

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

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

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

希望这有帮助。

请记住旧的方法：

{{ Form::script() }}

和

{{ Form::style() }}

已弃用，在Laravel 5中不起作用！

答案 1 :(得分：32)

试试吧。

您只需将路径传递给样式表即可。

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

您可以将路径传递给javascript。

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

在 composer.json 文件的require部分添加以下行，然后运行composer update ＆＃34;照亮/ html＆＃34;：＆＃34; 5。*＆＃ 34;

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

'Illuminate\Html\HtmlServiceProvider'

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

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

答案 2 :(得分：23)

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

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

答案 3 :(得分：14)

我使用这种方式，不要忘记将你的css文件放在公共文件夹上。

例如我把我的bootstrap css放在

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

从标题中访问：

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

希望这个帮助

答案 4 :(得分：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>

答案 5 :(得分：7)

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

答案 6 :(得分：3)

好的，所以我能够找到版本5.2。您首先需要在公共文件夹中创建assets文件夹，然后将css文件夹和所有css文件放入其中，然后将其链接为：

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

希望有所帮助！

答案 7 :(得分：3)

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也可以这样做。

答案 8 :(得分：3)

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

答案 9 :(得分：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') !!}

答案 10 :(得分：1)

我可能会参加派对，但只需使用asset（）函数就可以轻松地将JS和CSS包含在Laravel Way中

e.g。 import QtQuick 2.8 import QtQuick.Window 2.2 import GLWidget 1.0 Window { visible: true width: 320 height: 480 GLWidget{ anchors.fill: parent id: glView } Rectangle { color: Qt.rgba(1, 1, 1, 0.7) radius: 10 border.width: 1 border.color: "white" anchors.fill: label anchors.margins: -10 } Text { id: label color: "black" wrapMode: Text.WordWrap text: "The background here is a squircle rendered with raw OpenGL using the 'beforeRender()' signal in QQuickWindow. This text label and its border is rendered using QML" anchors.right: parent.right anchors.left: parent.left anchors.bottom: parent.bottom anchors.margins: 20 } }

希望有所帮助

答案 11 :(得分：1)

如果您有外部.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. 然后转到资源/ ass 。
  5. 打开文件app.scss。
  6. 向下滚动到底部，然后粘贴您的外部样式。
  7. 最后在终端中运行命令npm run dev。

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

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

Laravel JavaScript & CSS Scaffolding

YouTube Compiling Assets

答案 12 :(得分：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.

答案 13 :(得分：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。

相关问题
最新问题