Leveraging CSS Files with InertiaJS, Vue, and Laravel

I found a solution by using global CSS to remove the bootstrap button border on focus throughout 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233d233f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b6adb3adb1">[email protected]</a>/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 is not recognizing the app.css file in resources/css, leading to an error in the console: 

Failed to load resource: the server responded with a status of 404 (Not Found)

Any suggestions on how to solve this issue? Thank you!

csslaravelvue.jsinertiajs

Answer №1

Problem Reflection

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

The issue arises from the incorrect path specified in the href attribute, as it is currently pointing to the wrong directory for the CSS file. To resolve this, you can simply place the CSS file in the correct directory: public/css/app.css. However, a more efficient solution would involve utilizing compilation for generating better code.

Recommended Solutions

To compile the app.css file for production use, you can leverage the @vite Blade directive for loading both CSS and JS files.

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

Add the app.css file for compilation in the vite.config.js configuration file as shown below:

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

Better Solution for SPA Applications

In the context of Inertia and other SPA solutions, an alternative approach recommended in the Laravel documentation involves importing the app.css directly into the app.js file.

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

Subsequently, import the app.css file within the app.js script accordingly.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing asynchronous loading with Axios interceptors

When utilizing vue.js along with the axios library to make requests to my API, I aim to configure it globally and display a loading message when the request takes too long. I discovered that by using axios interceptors, I can set up axios configuration on ...

javascriptvue.jsaxios

The error message "jsPDF is not defined in Laravel using Vuejs and bootstrap-table-vue"

I encountered an issue when attempting to export a Bootstrap table in Vue as a PDF format. The error message I received was: app.js:100649 Uncaught ReferenceError: jsPDF is not defined at jQuery.fn.init../node_modules/tableexport.jquery.plugin/tableEx ...

laravelvue.jsbootstrap-tabletableexportjs

Looking up the Vue.js type definitions in TypeScript

I'm currently working on enabling type checking in my Vue.js code (v2.2.1). My initial goal is to ensure that this specific line compiles with TypeScript (meaning I want the Vue class to be properly identified): var app = new Vue(); I've discov ...

typescriptvue.js

Create a sleek and innovative tree user interface in a single line with the power of Angular and fxF

I created a tree with parent and child nodes, but I'm facing an issue where the positions of the checkboxes are not aligned in a straight line. Here is my code snippet: <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle> ...

htmlcssangular

Creating a unique design for a row within a table using React

Struggling with a simple issue that I can't seem to figure out due to my lack of styling skills... How can I adjust the default height of table rows using a css-in-js approach? First attempt involved using material-ui's Table and TableRow: const ...

cssreactjsmaterial-ui

Convert price to Indonesian Rupiah currency format with the help of Vue.js

Can someone help me convert the price format from IDR 50,000.00 to IDR 50.000 using JavaScript and Vue? I found a script on this website, but I am having trouble understanding how it works. The script looks like this: replace(/(\d)(?=(\d{3})+(?: ...

javascripthtmlregexstringvue.js

Aligning text and lists using Bootstrap on both desktop and mobile devices

I want to format a text with a list similar to the images provided https://i.stack.imgur.com/6giDH.png for desktop and tablet view, but for mobile display I would like it to look like this https://i.stack.imgur.com/7zSXi.png This is my current approach ...

htmlcsstwitter-bootstrap-3

How can ListSubheader in Material-UI be customized to match the style of iOS UITableView?

Here is the current appearance of my ListSubheader. https://i.stack.imgur.com/HAzTA.png Currently, it is just aligned to the left. However, the default header view in UITableView on iOS looks like this: https://i.stack.imgur.com/F9Amv.png It features ...

ioscssuitableviewmaterial-ui

Implementing lazy loading with Vue Router and vue-class-component: A step-by-step guide

I recently started learning Vue and am attempting to implement lazy loaded routes in a project that utilizes class style components. Currently, the components for the routes are defined using Webpack's dynamic import as shown below: { path: '/d ...

vue.jsvue-routervue-class-components

The Twitter widget is not staying in sync with the rest of the page when scrolling on

Twitter provides a widget that is widely used by many people. Below is the code provided by Twitter: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', ...

htmlcssinternet-explorerscroll

Creating a personalized design for Bootstrap Badge

Looking to customize the shape of bootstrap badges from the default ellipse to a rectangle with rounded corners. Any tips on the best approach to accomplish this? ...

csshtmltwitter-bootstrap

Resolved issue with header covering page content

https://i.sstatic.net/1PhFl.jpg The content underneath my fixed header is getting covered slightly by the header, rather than aligning perfectly with it. Ideally, the top of the carousel should be right below the bottom of the header to occupy the entire ...

htmlcssbootstrap-4

Could slots in Vue potentially have a negative impact on the overall design?

This afternoon, I dived into learning about slots in Vue. While I believe I have a good grasp on how to code them, I can't help but wonder if they are counterintuitive when it comes to design. Vue emphasizes building self-contained components with cl ...

vue.js

How can I style <p> tags with a specific font in Tailwind Typography?

For instance, suppose I wish to utilize the markdown as shown below: # AAAAAAAAAa BBBBBBB This would then be interpreted in such a way that AAAAAAAAAa is designated as h1, BBBBBBB as <p>, and the entire content enclosed within a prose div utilizing ...

cssreactjsnext.jstailwind-css

Issue encountered while trying to upload an image with Angular Material framework

I'm a beginner with angular material and I'm struggling to get any image I upload to take the position of my avatar image. Firstly, the avatar image isn't showing up at all and secondly, when I try to upload an image, it doesn't display ...

htmlcssangulartypescriptangular-material

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

I have a single div that initially displays text, and I want it to fade out after a specific time so that another div will then fade in. However, my attempt at coding this transition is not producing the desired result: $(function() { $(".preloa ...

javascripthtmljquerycss

Table designed using the Flexbox layout model

I am looking to create a table with multiple columns that can handle dynamic data. The challenge is that using the base <table> element would cause the column width to change when the content changes and I also need the ability to hide columns using ...

htmlcssflexbox

Innovative CSS techniques and outdated web browsers

Do you think it's beneficial to incorporate cutting-edge CSS-properties such as border-radius, text-shadow, box-shadow, and gradient into your layout designs today? And how about utilizing values like rgba()? As I explore various web galleries, I not ...

cssbrowser

Is it possible to eliminate the border on an image input button?

Here is the code I've been working on: HTML: <!DOCTYPE html> ... <form> <input type="image" value=" " class="btnimage" /> </form> ... CSS: .btnimage { width: 80px; height: 25px; background:url('C:/Users ...

htmlcss

The input field malfunctioned after the clear button was pressed

Hi there, I have a question. Every time I try to click on the clear button, it keeps giving me an error message and I'm not sure what the issue is. Also, I can't type in the field anymore after clicking it. methods: { add () { this.ta ...

javascriptvue.js