Блог

Я создаю простую систему, в которой нужно будет просматривать изображение.

Я использую панель администратора начальной загрузки paper-dashboard

который можно найти ниже:

https://www.npmjs.com/package/paper-dashboard

Затем мне нужно добавить функциональность файлового браузера, подобную скриншоту ниже, который я нашел в w3school

Но он не работает или не отображается должным образом в моем приложении Angular. Для того, чтобы проверить, правильно ли работает код начальной загрузки. Я создал фиктивный HTML-файл, и он отобразился правильно, как на скриншоте.

Но это то, как это отображается

Но у меня есть bootstrap.min.css в angular.json файле

 "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/paper-dashboard/assets/css/paper-dashboard.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/bootstrap-notify/bootstrap-notify.js"
            ],
  

Но если я импортирую bootstrap.min.css в style.scss

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

и удалите его в массиве styles

 "styles": [
              "src/styles.scss",
              "node_modules/paper-dashboard/assets/css/paper-dashboard.css"
            ],
  

Это стало таким. Навигация отображается неправильно.

Что могло вызвать это в Angular? Я из wpf. И я занимаюсь самообучением с angular 7 и asp.net ядро 2. Так что у меня действительно нет четкого понимания того, что происходит со stlye.

Спасибо.

Из того, что я вижу, вы импортируете начальную загрузку из

 "node_modules/bootstrap/dist/css/bootstrap.min.css"
  

Это означает, что вы установили bootstrap как отдельный пакет, который, скорее всего, является новейшей версией — v4.3.1

В paper-dashboard используется Bootstrap v3.3.5 , поэтому у вас есть несоответствие версии. (Проверьте это здесь)

Возможными решениями являются:

• установка npm bootstrap@3.3.5 — это заменит вашу текущую установку начальной загрузки на версию 3.3.5
• измените свой импорт, чтобы он соответствовал пути к bootstrap.min.css , расположенному в paper-dashboard package
• вручную обновите панель мониторинга, чтобы она соответствовала новейшей версии.