اذهب إلى المحتوى

السؤال

نشر

كنت استخدام Laravel Mix وانتقلت إلى استخدام Vite فواجهت مشكلة في تحزيم ملف SASS الخاصة ببوتستراب في ملف app.scss، كيف أقوم بذلك وتلك هي إعدادات vite الخاصة بي:

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

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

لكن تظهر الصفحة لدي بدون تنسيقات.

ما الذي يتوجب علي فعله؟ وقد أرفقت مجلد المشروع.

ولدي سؤال آخر هل يمكن استيراد ملفات CSS الخاصة ببوتستراب بدلاً من SASS؟

main.zip

Recommended Posts

  • 0
نشر

عزيزي الطالب،

من الواضح أنك تواجه مشكلة في دمج ملفات SASS الخاصة بـ Bootstrap في مشروع Laravel الذي يستخدم Vite. دعونا نتناول الجزء الأول من سؤالك حول كيفية تحزيم ملف app.scss الذي يحتوي على Bootstrap.

إصلاح مشكلة تحزيم ملف SASS

تأكد من تثبيت الحزم اللازمة: لاستخدام SASS مع Vite، تحتاج إلى تثبيت sass باستخدام npm أو yarn. يمكنك تثبيتها باستخدام الأمر التالي:
 

npm install sass

مراجعة ملف app.scss: تأكد من أن ملف app.scss الخاص بك يحتوي على الإعدادات الصحيحة ويستورد Bootstrap بشكل صحيح. يجب أن يكون شيء مثل:
 

@import "bootstrap";

تحديث إعدادات Vite: في إعدادات Vite الخاصة بك، يبدو كل شيء منظمًا بشكل صحيح. ومع ذلك، تأكد من أن مسارات الملفات صحيحة وتتوافق مع هيكل مجلدات مشروعك.
 

استيراد ملفات CSS الخاصة بـ Bootstrap بدلاً من SASS

نعم، يمكنك استيراد ملفات CSS الخاصة بـ Bootstrap بدلاً من استخدام SASS. للقيام بذلك:

تثبيت Bootstrap: إذا لم تكن قد قمت بتثبيت Bootstrap، يمكنك تثبيتها باستخدام npm
 

npm install bootstrap

استيراد Bootstrap CSS: في ملف app.js الخاص بك، يمكنك استيراد ملف CSS مباشرةً:
 

import 'bootstrap/dist/css/bootstrap.min.css';

 

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...