2

how to load js and css scripts all at once in Laravel?

Using the @extend blade template will load the scripts again.

1
  • I'm not clear as to what the requirement is here. If you @extend then the extended page will have all the includes of the parent page but if you never load the parent page then the scripts are only loaded once. Commented Jun 12, 2017 at 14:08

2 Answers 2

1

You should just need to install npm with command:

 npm install 

then make sure your package.json has laravel mix in the dependencies. Then run the command:

npm run dev

This will run you webpack.mix.js file, in your root directory, which you can compile js, scss, sass, css, vue components from your resources/assets/ directory.

You webpack.mix.js may look like this:

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');

Then your resources will be placed in the public\ or where ever you place them. Then you can reference them in your html views like so:

styles:

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

scripts:

<script src="{{ asset('assets/js/app.js') }}"></script>
<script src="{{asset('assets/js/enum_select.js')}}"></script>
Sign up to request clarification or add additional context in comments.

Comments

0

Try it.

You can just pass the path to the style sheet .

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

You can just pass the path to the javascript.

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

Add the following lines in the require section of composer.json file and run composer update "illuminate/html": "5.*".

Register the service provider in config/app.php by adding the following value into the providers array:

'Illuminate\Html\HtmlServiceProvider'

Register facades by adding these two lines in the aliases array:

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

Refer this url : How to include External CSS and JS file in Laravel 5

OR

adding css and js file in laravel 5.3

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.