style css not working after uploading file to a server in laravel 12

Question

I am new in laravel 12. I have a project in laravel 12. My custom CSS file is completely working in localhost after i run npm run dev, then i run npm run build to upload the project to my own server, but the CSS file not working. If i run npm run dev and open the project in my server, the CSS file works fine.

in layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>
    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    @vite(['resources/css/mystyle.css', 'resources/js/myjs.js'])
    <script src="{{ asset('js/myjs.js')}}"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('css/mystyle.css') }}">
</head>

should i locate the css and js file in public or in resources?

Keep Files in resources: Make sure your mystyle.css is located at resources/css/mystyle.css and myjs.js is at resources/js/myjs.js. Configure vite.config.js: Open the vite.config.js file in your project's root directory. Ensure all your CSS and JS entry points are listed in the input array. — Madusha Prasad
– Madusha Prasad, Commented Sep 23 at 5:18
Open the browser dev tools. Switch to network tab. Load the page. See the CSS failing to load (presumably in red), check the request path for the css. Compare that to where the file actually is. Remember in production, only files in public folder are accessible. — Snapey
– Snapey, Commented Oct 2 at 21:49

Bechir Ferjani · Accepted Answer · 2025-09-23 09:48:53Z

2

after you run npm run build , where you generate the dist folder ? public or ressources ? make sure you point to the correct css files after building

answered Sep 23 at 9:48

Bechir Ferjani

11 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

Community Sep 23 at 10:09

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

user2419119 Sep 23 at 10:14

How can I generate the dist folder?

Bechir Ferjani Sep 23 at 15:40

my bad i thought you were talking about the default generated css file but it seems like you created your own file , first you need to add it to the vite config so it gets compiled when you run npm run build in the vite.config.js . then in your blade file you should use the vite directive with the path to your css . vite.config : laravel({ input: ['resources/css/app.css', 'resources/js/app.js' , // 'resources/css/mycustom.css' ], refresh: true, }), tailwindcss(), ], blade : @vite(['resources/css/myc

Collectives™ on Stack Overflow

style css not working after uploading file to a server in laravel 12

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related