CODEWITHSUNDEEP
laravelhyperlink
ca hoi
ca hoi

Reputation: 13

how to link css and js in laravel

Could you tell me how to link css and js file in laravel according to my file structure I wanna link app.css and app.js into museum.blade.php (inside portfolio)

I have try something like this: <link rel="stylesheet" href="{{ asset('resources/css/app.css')}}">, but it did not work

here is my file structure

enter image description here

please help me, thank you so much

Upvotes: 0

Views: 2826

Answers (3)

Thosara Karunathilaka
Thosara Karunathilaka

Reputation: 1

First Step : Make a folder called css in public folder like this

Second Step : Put your css file here (like public/css/style.css)

Third Step : link it using this code in your html code

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

Enjoy !

Upvotes: 0

Alexander Roberts
Alexander Roberts

Reputation: 11

If your project has Vite installed, you can put @vite(['resources/css/app.css','resources/js/app.js']) in your welcome.blade.php file.

When creating a Laravel project using Composer, for Laravel framework version 10+ (not sure if exists in previous versions), you should also find a vite.config.js in the main parent directory. Using Node.js, do npm install then Vite should automatically be installed and available to use as specified above.

Upvotes: 0

Wailan Tirajoh
Wailan Tirajoh

Reputation: 534

I have try something like this: , but it did not work

This happens because resources folder are not to be consumed "public", the folder that would be consumed by "public" is a public folder, you need to compile them from resource to public first. Laravel has great documentation about it at Laravel Mix

To fix your problem, you need to find a file on your project directory called "webpack.mix.js"

and put this mix code on it.

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/museum.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')

and then you can run npm run dev at your command line to compile the assets.

it will compile your targeted resources on webpack mix to public.

After that, on the head of your museum.blade.php, you can call it like

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

Upvotes: 2

Related Questions