Using CSS in Laravel Views

Load different css/js for different views in laravel

I usually do this in this way, you don't use the include() blade in the master.blade since it will call to all pages regardless, just yield then in the other page just inject to that yielded section.

master.blade.js

<html>

    @yield('header')

    <body>

        @yield('content')

        @yield('footer')

    </body>
</html>

header.blade.php

 @extends('master')

    @section('header')
            --- CSS here ---
    @endsection

    @section('content')
        --- content here ---
    @endsection

    @section('footer')
        --- scripts here ---
    @endsection

How to use style.css files in laravel 5.4?

Placed your css file inside laravel_project/public/css folder and use the link it into your view like:

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

I think this will help you Thanks.

My View doesn't include the CSS of the blade template - laravel 8

Use asset() function in your all asset files e.g: css, js & images.

<head>
    <meta charset="utf-8">
    <link href="{{ asset('images/logo.svg') }}" rel="shortcut icon">
    <title>Dashboard</title>
    <!-- BEGIN: CSS Assets-->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}" />
    <!-- END: CSS Assets-->
</head>

Where to put css file in laravel project

Place your css files inside public folder and use link tag in html document (or 404 template)

Example

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

Laravel Access css and js file from resources css and js directory

Put your css and js file inside public folder like this:

-public
  -css
    -mycss.css
  -js
    -myjs.js

Now you can access your files like this.Putthis below line of code inside head tag

For css

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

For Js

<script src="{{asset('js/myjs.js')}}"></script>

Link css and js of a template (from vendor) to my views

You can use webpack for that, check file webpack.mix.js add or search line like below

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

// in 'app.scss
// import all necessary css files 
@import 'vendor\almasaeed2010\adminlte\dist\css\adminlte.min.css'

run npm install if never, then run npm run dev or npm run prod.
It will create app.css in public/css

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