Dec 28, 2020

Level 4

How to link External CSS file to Laravel Blade file

using Laravel 7 and I have following welcome.blade.php file

@extends('layouts.app')

@section('content')
@include('pages.main')

@include('partials._footer')

@endsection

my main.blade.php file is like

<main role="main">
<div class="album py-5 bg-light">
  <div class="container ">
    <div class="row">
      <div class="col-md-4">
          <a href="#" class="thumbnail">
           <div class="card border-dark mb-3 rounded-0" style="max-width: 25rem;">
               <div class="card-header bg-transparent border-dark rounded-0">Header</div>
  </div>
  </div>
</div>

and I need add some css file name album.css to main.blade.php file in side the pages folder and css file is in the public/css folder. then how could I add my css file to main blade file as external file?

MichalOravec

5 years ago

Best Answer

Level 75

In layouts.app.blade.php to the <head> add

@stack('css')

Then where you need add an other css

@push('css')
    <link rel="stylesheet" href="path to your css">
@endpush

Docs: https://laravel.com/docs/8.x/blade#stacks

5 likes

jame254

4 years ago

Level 1

does this apply when i have different stylesheet for each page?

Amalmax

5 years ago

Level 4

working for this codes


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

MichalOravec

5 years ago

Level 75

This is enough

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

https://laravel.com/docs/8.x/helpers#method-asset

Or when you use laravel mix then use a mix helper.

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

https://laravel.com/docs/8.x/helpers#method-mix

2 likes

ibnath4u

3 years ago

Level 1

@MichalOravec I have tried But it is not working

anjanesh

3 years ago

Level 5

Most of the answers refer to mix. Laravel 9 has replaced mix with vite. Vite is just the tooling that replaced mix right ?

This would still work if we were to remove mix altogether and use vite ?

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

What is the vite equivalent of mix('css/main.css') ?

codexknight7

3 years ago

Level 1

Hi everyone, could I ask the same question again? After trying all the possible and impossible ways, I could not make my CSS work. The file is not found. 404 is returned. I have a very simple Blog application.

-A master layout in views, with includes of additional layouts:

\blog\resources\views\layouts\master.blade.php

-I load here my css file like this, in section:

link href="{{ asset('css/blog.css') }}" rel="stylesheet"

-The CSS file is here:

resources\css\blog.css

I tried with :

link href="css/blog.css'" rel="stylesheet"

link href="/css/blog.css'" rel="stylesheet"

link href="../../css/blog.css'" rel="stylesheet"

And nothing works. Always 404 Not Found.

2 likes