Search code examples
csslaravelvue.jsinertiajs

InertiaJS - Vue - Laravel : Utilizing CSS Files

I needed to use some global css to remove bootstrap button border on focus through all my vue components

resources/css/app.css

.btn:focus {
    box-shadow: none;
}

resources/views/app.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../css/app.css"> // 404 Not Found
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

However, app.blade.php doesn't seem to recognize that app.css file located in resources/css, as it gives me error in console : Failed to load resource: the server responded with a status of 404 (Not Found)

How to solve that issue ? thanks

Solution

  • Reflecting on your problem

    <link rel="stylesheet" href="../css/app.css">

    The issue here is that the link you've written in href starts looking for the CSS file in the public folder instead of the resources folder. If you don't want to compile the CSS with Vite and just want to write a plain CSS file, simply place it in public/css/app.css. However, this is a rather basic approach. You can generate much better code with compilation, so I recommend following one of my solutions.

    Solution # 1

    I assume you also want to compile the app.css file for the prod version. In this case, you can use the @vite Blade directive to load the app.css as well.

    @vite(['resources/css/app.css', 'resources/js/app.js'])

    Also, in the vite.config.js file, you need to add the app.css for compilation.

    import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

    Solution # 2 (better for Inertia and another SPA solutions)

    In the Laravel documentation for Inertia, another suggested method is to simply import the app.css into the app.js file in this case.

    @vite('resources/js/app.js')

    And let's import the app.css into the app.js file.

    import '../css/app.css';