laravel 9 css not display properly

Question

I have create a new laravel 9 project and I have encounter an css and js assets connection problem

At first, I have run

php artisan serve

to see if my project is working , and seems like everything is fine .

but when I just simply remove an part from the view , the css/js just get disabled to the view

even I undo the changes , the css are still not working . did any know whats happen?

here is my code for the css, and I believe it was properly connected


    <head>
        
        <meta charset="utf-8" />
        <title>Admin Dashboard  </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="Themesdesign" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="{{ asset('backend/assets/images/favicon.ico')}}">

        <!-- jquery.vectormap css -->
        <link href="{{ asset('backend/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css')}}" rel="stylesheet" type="text/css" />

        <!-- DataTables -->
        <link href="{{ asset('backend/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

        <!-- Responsive datatable examples -->
        <link href="{{ asset('backend/assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />  

        <!-- Bootstrap Css -->
        <link href="{{ asset('backend/assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
        <!-- Icons Css -->
        <link href="{{ asset('backend/assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />
        <!-- App Css-->
        <link href="{{ asset('backend/assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />

    </head>

codes for vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
            'resources/css/app.css',
             'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

I have already do some research and seems like it might be related to the "vite", but It was something very strange to me . Could anyone tell me what should I do . Thank you in advance

Do you get a warning in your console?

Kevin
– Kevin

2022-08-01 09:16:50 +00:00
Commented Aug 1, 2022 at 9:16 — Kevin
– Kevin, Commented Aug 1, 2022 at 9:16
no , i didnt get any warning

JUSTIN CHUA
– JUSTIN CHUA

2022-08-01 09:21:53 +00:00
Commented Aug 1, 2022 at 9:21 — JUSTIN CHUA
– JUSTIN CHUA, Commented Aug 1, 2022 at 9:21

parth · Accepted Answer · 2022-08-01 09:28:35Z

From version 9.19.0 Laravel has drop the webpack and added the vitejs

To add css and js, you need to configure the vite

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'backend/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css',
            'backend/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css',
            'backend/assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css',
            'backend/assets/css/bootstrap.min.css',
            'backend/assets/css/icons.min.css',
            'backend/assets/css/app.min.css',
        ]),
    ],
});

To run the dev serve npm run dev

In blade

@vite([
    'backend/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css',
    'backend/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css',
    'backend/assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css',
    'backend/assets/css/bootstrap.min.css',
    'backend/assets/css/icons.min.css',
    'backend/assets/css/app.min.css',
]);

For more information laravel vite doc

Collectives™ on Stack Overflow

laravel 9 css not display properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related