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

السؤال

Recommended Posts

  • 1
نشر
  بتاريخ On 22‏/4‏/2021 at 13:48 قال صـيـت احمد:

اخي عبدالمجيد فعلت كما قلت والى الان لم تحل المشكلة 

المشروع لتو بدأت فيه اخي محمد 

App.jsFetching info...

أظهر المزيد  

يبدو أن لديك خطأ بسيط في إستدعاء Bootstrap حيث يجب أن يكون بهذا الشكل:

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

لاحظ اسم الملف bootstrap.min.css مكتوب لديك بشكل خاطيء.

يجب أيضًا أن تتأكد من أنك قمت بتثبيت bootstrap بشكل صحيح من خلال التحقق من ملف package.json والذي يجب أن يحتوي على التالي:

{
  // ...
  
  "dependencies": {
    "bootstrap": "^4.6.0",	// يجب أن يكون لديك بوتستراب مثبت
  },
  // ...
}

 

  • 0
نشر

المشكلة هي أنه لم يجد ملف bootstrap

يجب عليك التأكد أنك قمت بإستدعائه بشكل صحيح

يمكن القيام بتثبته عبر npm بإستخدام هذا الأمر

npm install bootstrap@3

أو يمكنك بإختصار إضافة bootstrap في ملف index.html في المجلد Public

وإضافة هذه الروابط

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 

  • 0
نشر
  بتاريخ On 22‏/4‏/2021 at 17:15 قال سامح أشرف:

يبدو أن لديك خطأ بسيط في إستدعاء Bootstrap حيث يجب أن يكون بهذا الشكل:

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

لاحظ اسم الملف bootstrap.min.css مكتوب لديك بشكل خاطيء.

يجب أيضًا أن تتأكد من أنك قمت بتثبيت bootstrap بشكل صحيح من خلال التحقق من ملف package.json والذي يجب أن يحتوي على التالي:

{
  // ...
  
  "dependencies": {
    "bootstrap": "^4.6.0",	// يجب أن يكون لديك بوتستراب مثبت
  },
  // ...
}

 

أظهر المزيد  

شكرا لك اخي سامح بالمشاركه فعلت الذي قلت عليه وعند اضافة الاكواد الذي ارسلته في package.json لايعمل نهائيا والى الان نفس المشكلة

  • 0
نشر
  بتاريخ On 23‏/4‏/2021 at 07:13 قال صـيـت احمد:

شكرا لك اخي سامح بالمشاركه فعلت الذي قلت عليه وعند اضافة الاكواد الذي ارسلته في package.json لايعمل نهائيا والى الان نفس المشكلة

أظهر المزيد  

أعتقد أن Bootstrap لم يكن مثبتًا لديك، بعد إضافته في ملف package.json هل بإمكانك تنفيذ الأمر التالي، ثم إعادة تشغيل المشروع:

npm i

 

  • 0
نشر
  بتاريخ On 22‏/4‏/2021 at 13:48 قال صـيـت احمد:

اخي عبدالمجيد فعلت كما قلت والى الان لم تحل المشكلة 

المشروع لتو بدأت فيه اخي محمد 

App.jsUnavailable

أظهر المزيد  

هذا الملف الرئيسي فقط يجب عليك إرسال كامل ملفات المشروع من دون مجلد node mudules للتأكد من packages.json

وأيضا يمكنك استخدام البدائل الأخرى التي كتبتها سابقا

  • 0
نشر
  بتاريخ On 23‏/4‏/2021 at 09:47 قال سامح أشرف:

أعتقد أن Bootstrap لم يكن مثبتًا لديك، بعد إضافته في ملف package.json هل بإمكانك تنفيذ الأمر التالي، ثم إعادة تشغيل المشروع:

npm i

 

أظهر المزيد  

فعلت ماقلت عليه والا الان المشكلة قائمة 

  بتاريخ On 23‏/4‏/2021 at 13:32 قال عبدالمجيد الجرادي:

هذا الملف الرئيسي فقط يجب عليك إرسال كامل ملفات المشروع من دون مجلد node mudules للتأكد من packages.json

وأيضا يمكنك استخدام البدائل الأخرى التي كتبتها سابقا

أظهر المزيد  
packaed.json من دون اضافات

{

  "name": "weather",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^5.11.10",

    "@testing-library/react": "^11.2.6",

    "@testing-library/user-event": "^12.8.3",

    "bootstrap": "^3.4.1",

    "react": "^17.0.2",

    "react-bootstrap": "^1.5.2",

    "react-dom": "^17.0.2",

    "react-router-dom": "^5.2.0",

    "react-scripts": "4.0.3",

    "src": "^1.1.2",

    "web-vitals": "^1.1.1"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"



    

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  },

  "devDependencies": {

    "css-loader": "^5.2.4",

    "style-loader": "^2.0.0"

  }

}

 

  • 0
نشر

اولا Bootstrap موجود في packages.json 

ثانيا يجب عليك تشغيل الأمر npm install لتثبيت جميع الحزم التي في packages.json

وآخيراً في الملف App.js يجب عليك تغيير 

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

الى

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

فكما تلاحظ لا يوجد 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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...