Гэтсби + Bootstrap CSS Проблема (Запрещено запрашивать ресурс) - PullRequest
Новая
       106

Гэтсби + Bootstrap CSS Проблема (Запрещено запрашивать ресурс)

1 голос
/ 14 июля 2020

У меня установлен npm пакет bootstrap + Импортирован в gatsby-browser. js файл (см. Ниже). Bootstrap CSS работает, но проблема в том, что я продолжаю получать это сообщение об ошибке в консоли. Что я делаю не так?

Возможные проблемы:

  • Нужно ли мне устанавливать react- bootstrap?
  • Другой плагин Gatsby ?
  • Мне не хватает дополнительных настроек Gatsby?

Ошибка: 

[Error] Not allowed to load local resource: blob://nullhttp//localhost:8000/bootstrap.min.css.map
[Error] Not allowed to request resource
[Error] Cannot load blob://nullhttp//localhost:8000/bootstrap.min.css.map due to access control checks.

gatsby-browser. js : 

// Imports: Dependencies
import 'bootstrap/dist/css/bootstrap.css';

пакет. json: 

  "dependencies": {
    "axios": "^0.19.2",
    "bootstrap": "^4.5.0",
    "britecharts-react": "^0.5.4",
    "chart.js": "^2.9.3",
    "chartjs-plugin-annotation": "^0.5.7",
    "chartjs-plugin-datalabels": "^0.7.0",
    "fs-extra": "^9.0.1",
    "gatsby": "^2.23.7",
    "gatsby-plugin-google-analytics": "^2.3.4",
    "gatsby-plugin-manifest": "^2.4.12",
    "gatsby-plugin-react-helmet": "^3.3.4",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-chartjs-2": "^2.9.0",
    "react-countup": "^4.3.3",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^3.10.0"
  },

1 Ответ

0 голосов
/ 15 июля 2020

Хорошо, оказывается, проблема исходит из строки: 

"bootstrap": "^4.5.0",

... которую я также рекомендую как зависимость от react-bootstrap. Обратите внимание, что одним из вариантов может быть включить bootstrap CSS через ссылку CDN , как это предлагается в react-bootstrap do c. Таким образом можно было полностью удалить bootstrap из зависимостей проекта, что решило бы эту проблему.

Я решил проявить настойчивость и попытаться исправить проблему.

В этом модуле есть файл node_modules/bootstrap/dist/css/bootstrap.min.css который включает директиву исходной карты sourceMappingURL прямо в конце файла, которая не работает при развертывании в качестве зависимости узла для моего проекта.

Я вручную удалил эту строку, и обнаружил, что веб-пакет идет вперед и создает правильное значение исходной карты для bootstrap через URI данных в кодировке base64. Проблема решена.

Вы можете удалить строку с помощью следующей команды sed (это работает на Ma c из root директории проекта): 

sed -i '' -e '/\/\*# sourceMappingURL.*/d' node_modules/bootstrap/dist/css/bootstrap.min.css

Кредит для этого однострочник переходит к сообщению, которое я нашел , в котором обсуждается удаление файлов исходной карты, где люди делали это как часть пост-сборки.

Я не планирую перестраивать bootstrap package, поэтому я не думаю, что пост-сборка мне поможет. Удалив его один раз, ничего страшного. На данный момент я только что добавил себе в свой проект README напоминание о необходимости повторного запуска команды sed при обновлении пакетов.

Это не решило мои CSS проблемы, как это произошло - они были вызваны другими проблемами: в моем случае это был ряд других CSS файлов из начального проекта, которые мешали bootstrap CSS, а также дополнительный элемент div, который я использовал для переноса некоторой навигации компоненты, которые мешали им правильно отображаться.

...