How to load css and js file in laravel

Question

I am new in laravel and i want to include css and js from public folder using this

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

But it is not working for me . public folder contains the assets folder in which i have css and js files with is code

h1{
    color:darkgreen;
}

I want just css and js files include in blade files . So i have created one folder inside public folder and include using this code

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

But i am not able see effect of this css and js in blade file so please help me for include css and js file in blade file

Answer 1

You do that by using laravel-mix, first of all you should download and install NodeJs

Then on your project directory you check on command line npm -V to see if you have successfully installed node.

Then you run npm run install then on your laravel project file dir you will have a file called webpack.mix open up that file and reference all your css and JS files that are stored on resources/assets/css or js.

After you set all the files on resources then on command line you run npm run dev and everything you change/add on ur resource/ js or css will be compiled to public directory. To see compile status, run the command npm run watch.

This way your Laravel project will have included all js and css files.

Answer 2

You must use laravel mix method to link css and js files. After you build your scss/less and js files with version() which will help you for cache busting and .sourceMaps() for sourcemap (Development).

code sample:

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

Example :

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

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

This will generate the full css link with random hash no which handled by laravel.

Answer 3

You are using URL::asset as it should be used

but you have forgotten to wrapped it in double-quote as href={{URL}} should be href="{{URL}}"

And you are including your files in assets folder but you have not specified that in your url, so just use as below:

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

And if you think that for using URL::asset you have to make asset folder in public folder then you are misinformed, because by default public folder will be used as asset if not any ASSETS_URL specifed in .env file.

So there is no need to make assets folder but if you want to then you can, otherwise my public folder structure look alike below:

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

And by the way you can also use just asset() as i used.

Answer 4

You can put the css and js file in the public folder. then use your main file app.blade.php

if your file is in the css folder of public directory.

Answer 5

Embed asset file to blade template by using Html helper

1. open file composer.json add this

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

then run command composer update

2. Next you have to add provider located in config/app.php with this line

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

3. Add two class aliases to the aliases array of config/app.php:

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

In blade template you would use {{ Html::script('yourfolder/jquery-2.2.3.min.js')}} for script and {{Html::style('yourfolder/bootstrap.min.css')}} for style

Answer 6

In your root view file eg. > app.blade.php

Include with link tag eg: <link rel="stylesheet" href="{{ URL::asset('assets/css/your_file.css') }}">

Assets will link you to your public folder and you can include the file using your path to the file with the subfolders to your file.

Happy coding :)