CSS لا يتم تحميله مع npm run dev في Laravel Jetstream

احمد مصطفى14 · 24 يونيو

لماذا تظهر بهاذا الشكل
لقد قمت بتنزل لارافيل ومعه jetstream

عند تشغيل المشورع باستخدام npm run dev
تظهر لي ملفات ال css في ال network انها غير موجودة

وفي نفس الوقت عندنا استعمل
php artisan serve
كل شي يعمل بشكل طبيعي

Mustafa Suleiman · 24 يونيو

لنتأكد أولاً من تثبيت الحزم بشكل صحيح من خلال الأمر:

npm install

ثم:

npm install -D vite laravel-vite-plugin

ثم تفقد ملف 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,
        }),
    ],
});

ثم ستحتاج إلى تحديث ملف العرض الرئيسي الخاص بك وهو app.blade.php الموجود في المسار resources/views/layouts/ لإضافة استدعاءات Vite:

   <head>
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

    </head>

محمد عاطف17 · 26 يونيو

أعتقد أن المشكلة لديك في العنوان الذى يتم الذهاب إليه لإحضار ملفات ال css من سيرفر vite حيث لاحظت أنك تستخدم ملف ال host في الويندوز لتغير عنوان الموقع بدلا من localhos t.

لذلك أولا تأكد من المسار الخاص بملف ال css في network وإرسال صورة لي للمسار .

والآن لنقم بتعديل العنوان الخاص بسيرفير vite حتي يصبح مثل السيرفر الخاص بلارافيل .

في ملف vite.config.js نقوم بكتابة الإعدادات التالية :

export default defineConfig({
  server: {
    host: 'lossless.test',
    port: 3000
  }
})

والآن تاكد هل تم تغير المسار الذى يتم إستدعاء ملفات ال css منه في ال network أم لا.

CSS لا يتم تحميله مع npm run dev في Laravel Jetstream

السؤال

احمد مصطفى14

2 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

محمد عاطف17

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية