如何在Laravel中一次加载js和css脚本?

时间:2017-06-12 03:28:22

标签: javascript php css laravel laravel-5.3

如何在Laravel中一次性加载js和css脚本?

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

2 个答案:

答案 0 :(得分:1)

您只需要使用命令安装npm:

 npm install 

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

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>

答案 1 :(得分:0)

试试吧。

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

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

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

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

请参阅此网址:How to include External CSS and JS file in Laravel 5

OR

adding css and js file in laravel 5.3