Adding external CSS file in Laravel | How to include External CSS file in Laravel

on

To include an external CSS file in a Laravel application, you can follow these steps:

  1. Download or Reference the External CSS File:

    First, obtain the external CSS file you want to include in your Laravel application. You can either download it and place it in a specific directory within your Laravel project or reference it directly from an external source (e.g., a CDN).

  2. Option 1: Place CSS File in the public Directory:

    If you downloaded the external CSS file, you can place it in the public directory of your Laravel project. For example, create a new directory called css inside public and place your CSS file there:

    kotlin
  • public
├── css
│   └── external.css

  • Option 2: Link to External Source (CDN):

    If you prefer to reference an external CSS file from a Content Delivery Network (CDN), you can include it directly in your Blade view or layout file. For example, to include Bootstrap CSS from a CDN, you can add the following to your Blade view file:

    html
  • <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  • Include CSS File in Blade View:

    Open the Blade view file where you want to include the external CSS file. You can include it using the asset helper function if the file is in your public directory or use a full URL if you're referencing an external source.

    For example, to include an external CSS file named external.css located in the public/css directory:

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

    Or, to include an external CSS file from a CDN:

    html
  • <link rel="stylesheet" href="https://example.com/path/to/external.css">

    Place this <link> tag in the <head> section of your Blade view file.

  • Clear Cache (if necessary):

    If you have caching enabled in your Laravel application, you may need to clear the cache to see the changes take effect. You can clear the cache using the following Artisan command:

    bash
    1. php artisan cache:clear

      Additionally, you can use the php artisan view:clear command to clear the compiled Blade views.

    By following these steps, you can successfully include an external CSS file in your Laravel application, either by placing it in the public directory or by referencing it directly from an external source.

    Comments

    Post a Comment