如何在 Laravel 中一次加载 js 和 css 脚本？答案

【问题标题】：how to load js and css scripts all at once in Laravel?如何在 Laravel 中一次加载 js 和 css 脚本？
【发布时间】：2017-11-13 10:23:09
【问题描述】：

如何在 Laravel 中同时加载 js 和 css 脚本？

使用@extend 刀片模板将再次加载脚本。

【问题讨论】：

我不清楚这里的要求是什么。如果您@extend，则扩展页面将包含父页面的所有内容，但如果您从不加载父页面，则脚本仅加载一次。

标签： javascript php css laravel laravel-5.3

【解决方案1】：

您应该只需要使用命令安装 npm：

 npm install

然后确保你的 package.json 在依赖项中有 laravel mix。然后运行命令：

npm run dev

这将在你的根目录中运行你的 webpack.mix.js 文件，你可以从你的 resources/assets/ 目录编译 js、scss、sass、css、vue 组件。

你的 webpack.mix.js 可能看起来像这样：

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/assets/js');

mix.scripts([
    'resources/assets/js/enum_gender_select.js',
    'resources/assets/js/enum_title_select.js'
], 'public/assets/js/enum_select.js');


mix.sass('resources/assets/sass/app.scss', '../resources/assets/css/sass.css');

mix.styles([
    'resources/assets/css/app.css',
    'resources/assets/css/sass.css'
], 'public/assets/css/all.css');

然后您的资源将被公开\或您放置它们的任何地方。然后你可以像这样在你的 html 视图中引用它们：

风格：

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

脚本：

<script src="{{ asset('assets/js/app.js') }}"></script>
<script src="{{asset('assets/js/enum_select.js')}}"></script>

【讨论】：

【解决方案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'

参考这个网址：How to include External CSS and JS file in Laravel 5

或

adding css and js file in laravel 5.3

【讨论】：