如何在laravel中加载css和js文件

Question

我是laravel的新手，我希望使用此

从公共文件夹中包含css和js

GetThreadTimes()

但它不适合我。公用文件夹包含assets文件夹，其中我有css和js文件，代码为

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

我想在刀片文件中包含css和js文件。所以我在公共文件夹中创建了一个文件夹，并包含使用此代码

h1{
    color:darkgreen;
}

但是我无法在刀片文件中看到这个css和js的效果所以请帮我在刀片文件中包含css和js文件

Answer 1

你通过使用laravel-mix来做到这一点，首先你应该下载并安装NodeJs

然后在项目目录中检查命令行npm -V以查看是否已成功安装节点。

然后你运行npm run install然后在你的laravel项目文件目录上你将有一个名为webpack.mix的文件打开该文件并引用存储在resources/assets/css or js上的所有css和JS文件

在资源上设置所有文件后，在命令行上运行npm run dev，您在resource/ js or css上更改/添加的所有内容都将编译到公共目录。要查看编​​译状态，请运行命令npm run watch。

这样，您的Laravel项目将包含所有js和css文件。

Answer 2

您必须使用laravel mix方法链接css和js文件。 使用version()构建scss / less和js文件之后，这将帮助您进行缓存清除，并.sourceMaps()用于源图（开发）。

代码示例：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/manage/scss/app.scss' , 'public/css/app-temp.css')
  .sourceMaps()
  .version();

示例：

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

<script src="{{ mix('js/app.js') }}"></script>

这将生成带有laravel处理的随机散列no的完整css链接。

Answer 3

您正在使用URL::asset，因为它应该被使用

但是您已经忘记将其用双引号引起来，因为href={{URL}}应该是href="{{URL}}"

并且您正在将文件包含在Assets文件夹中，但尚未在URL中指定，因此请按以下方式使用：

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

如果您认为要使用URL::asset，则必须将asset文件夹放在公用文件夹中，那么您会被告知错误，因为默认情况下，如果没有公用文件夹{{1}，公用文件夹将被用作资产。 }在ASSETS_URL文件中指定。

因此不需要建立.env文件夹，但是如果需要，可以这样做，否则我的公用文件夹结构如下所示：

assets

顺便说一句，您也可以只使用我使用的<link href="{{ asset('css/app.css') }}" rel="stylesheet"> <script type="text/javascript" src="{{ asset('js/app.js') }}"></script> 。

Answer 4

您可以将css和js文件放在公用文件夹中。 然后使用你的主文件app.blade.php

如果您的文件位于公共目录的css文件夹中。

Answer 5

在根视图文件中，例如。 ＆GT; app.blade.php

包含链接标记，例如：<link rel="stylesheet" href="{{ URL::asset('assets/css/your_file.css') }}">

资产会将您链接到您的公共文件夹，您可以使用您的文件路径包含该文件，并将子文件夹添加到您的文件中。

快乐编码：）

Answer 6

使用Html帮助程序将资产文件嵌入到刀片模板

1. 打开文件composer.json添加此

"require": { "laravelcollective/html": "^5.2" }

然后运行命令composer update

1. 接下来，您必须使用此行添加位于config/app.php的提供商

'providers' => [ // ... Collective\Html\HtmlServiceProvider::class, // ... ]

1. 将两个类别名添加到config/app.php的别名数组中：

   'aliases' => [ // ... 'Form' => 'Collective\Html\FormFacade', 'Html' => 'Collective\Html\HtmlFacade', // ... ],

在您使用的刀片模板中 {{ Html::script('yourfolder/jquery-2.2.3.min.js')}}用于脚本和 风格为{{Html::style('yourfolder/bootstrap.min.css')}}