【问题标题】:How to load css and js file in laravel如何在 laravel 中加载 css 和 js 文件
【发布时间】:2017-11-28 00:35:30
【问题描述】:

我是 laravel 的新手,我想使用这个从公共文件夹中包含 css 和 js

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

但这对我不起作用。公共文件夹包含资产文件夹,其中我有 css 和 js 文件,代码是

h1{
    color:darkgreen;
}

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

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

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

【问题讨论】:

    标签: php css laravel laravel-5


    【解决方案1】:

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

    如果你的文件在公共目录的css文件夹中。

    【讨论】:

      【解决方案2】:

      在您的根视图文件中,例如。 > app.blade.php

      包含链接标签,例如:&lt;link rel="stylesheet" href="{{ URL::asset('assets/css/your_file.css') }}"&gt;

      Assets 会将您链接到您的公用文件夹,您可以使用您的文件路径以及您的文件的子文件夹来包含该文件。

      编码愉快:)

      【讨论】:

        【解决方案3】:

        你使用 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 文件。

        【讨论】:

          【解决方案4】:

          使用 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')}} 风格

          【讨论】:

            【解决方案5】:

            你必须使用 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 处理的带有随机散列号的完整 css 链接。

            【讨论】:

              【解决方案6】:

              你正在使用URL::asset,因为它应该被使用

              但是你忘了用双引号括起来因为href={{URL}}应该是href="{{URL}}"

              并且您将文件包含在 assets 文件夹中,但您没有在您的 url 中指定,所以只需如下使用:

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

              如果您认为使用URL::asset 必须在公用文件夹中创建asset 文件夹,那么您就被误导了,因为默认情况下,如果在.env 中没有指定任何ASSETS_URL,公用文件夹将用作资产文件。

              所以不需要创建assets 文件夹,但如果你愿意,那么你可以,否则我的公共文件夹结构如下所示:

              <link href="{{ asset('css/app.css') }}"  rel="stylesheet">
              <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
              

              顺便说一句,你也可以像我一样使用asset()

              【讨论】:

                猜你喜欢
                • 2019-08-14
                • 1970-01-01
                • 1970-01-01
                • 2019-03-07
                • 2015-01-09
                • 2017-02-08
                • 1970-01-01
                • 2017-11-13
                • 1970-01-01
                相关资源
                最近更新 更多