Scribd
Upload
28 views3 pages

Laravel Part-7

Uploaded by

waver58650
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views3 pages

Laravel Part-7

Uploaded by

waver58650
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Video-24 (Adding CSS and JS in Laravel):-

-----------------------------------------------------------
There are two ways to write css and js in your file : -
1. Internal CSS and JS
We can write our css inside the <head> </head> and our JS code
inside the <body> </body> tag. Js code also writes in <head> </head>
tag.

2. External CSS and JS


We can create a external CSS and JS file and link the main page where
you want to use this code.
Location of External CSS & JS file : -
a. Inside Public folder
create a css & js file inside public folder : -
Location of css : -public/css/style.css
Location of js : - public/js/myscript.js

Use this css and js file inside your layout or template file : -
for css file :-
<link rel="stylesheet" href="css/style.css">
{{-- Using asset method --}}
<link rel="stylesheet"href="{{asset('css/style.css')}}">
{{-- Using url method --}}
<link rel="stylesheet" href="{{ url('css/style.css')}}">

for js file :
<script src="js/myscript.js"></script>
{{-- Using asset method --}}
<script src="{{asset(‘js/myscript.js’)}}"></script>
{{-- Using url method --}}
<script src="{{ url(‘js/myscript.js’)}}"></script>

b. Inside resources folder


i. When your css and js file to compile then you use your css
and js file inside the resources folder.

ii. Iske le kuch requirement hota hai : -


a. Install Node : - https://nodejs.org/en/
b. Install Laravel Mix using npm : - The required dependency
is already mention in package.json file so just run
npm install and laravel mix will automatically get installed.
c. Create CSS and Js File inside resources/css and
resources/js folder respectively.
d. Open webpack.mix.js file and mention created css and js
files, later it will be processed.

Example:-
mix.js (‘resources/js/app.js’, ‘public/js’)
.js (‘resources/js/myscript.js’, ‘public/js’)
.postCss (‘resources/css/app.css’, ‘public/css’ ,[ ])
.postCss (‘resources/css/style.css’, ‘public/css’)

mix.js('resources/js/app.js', 'public/js')
.js('resources/js/myscript.js', 'public/js')

.postCss('resources/css/app.css', 'public/css', [])


.postCss('resources/css/style.css', 'public/css');

e. Now, run the command npm run dev, This command will
run all mix tasks and all of your application’s CSS and JS
assets will be compiled and placed in your application’s
public directory (Non-minified code).
OR
Now, run the command npm run prod, This command will
run all mix tasks and all of your application’s CSS and JS
assets will be compiled and placed in your application’s
public directory (minified code).
OR
Then run npm run watch, command which will continue
running in your terminal and watch all relevant CSS and JS
file for changes.Webpack will automatically recompile your
assets when it detects a change to one of those files.

Now you can write css and js code inside the resource
folder and it will automatically be compiled and will be
available inside the public folder.
Video-25 (How to add image in Laravel):-
-----------------------------------------------------------
Store image in our project location : - Inside public folder
Location of image : -public/images/sonam.jpg
<img src="images/sonma.jpg" alt="sonam.jpg">
{{-- Using asset helper method --}}
<img src={{asset("images/sonma.jpg")}} alt="sonam.jpg">
{{-- Using url method --}}
<img src={{url("images/sonma.jpg")}} alt="sonam.jpg">

You might also like