Минимизированный css Bootstrap загружается только в том случае, если я импортирую его в index.js
Итак, до сих пор я использовал загрузчик BootstrapCDN, но я хотел бы просто загрузить файлы и использовать их локально, не полагаясь на мое подключение к Интернету, но стили не загружаются. Кстати, мне нужен только сетка.
Я использую reactjs с материальным пользовательским интерфейсом и загрузочной сеткой -> структура проекта
Я изменил ссылку на таблицу стилей и скрипт, чтобы они указывали на мои файлы, а также соответствующим образом изменил теги jQuery и Popper.js.
CSS
от
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"...>
к
<link rel = "stylesheet" href = "../src/bootstrap/sources/css/bootstrap.min.css">
JS
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
в настоящее время:
<script src = "../src/bootstrap/sources/js/bootstrap.min.js"></script>
и то же самое с
<script src = "../src/bootstrap/jquery-3.2.1.slim.min.js"></script>
<script src = "../src/bootstrap/popper.min.js"></script>
в то время как ссылка на bootstrap.min.css находится в теге <header>, а все остальные в теге <body>.
Сетка не работает, все перепутано. Но если я включу import './bootstrap/sources/css/bootstrap.min.css'; в свой файл /src/index.js — файл, в котором у меня есть мои личные маршруты к определенным страницам — сетка действительно работает.
Если я изменю его обратно на css кэш-бутстрапа из BootstrapCDN и укажу ссылку, как это было раньше, мне не нужно включать этот импорт, и сетка будет работать безупречно.
Я делаю что-то неправильно?
Обновлено: хром показывает файл css и все файлы js, загружаемые с помощью код 304 - не изменены на вкладке сети
Офк, извините - добавил скриншот
Ответы 1
Прежде всего: нет ничего плохого в сохранении импорта CSS в вашем JS-файле... что в этом плохого? Это распространенный способ в React.
О вашей конкретной проблеме: вы имеете в виду несуществующий файл, например ../src/bootstrap/jquery-3.2.1.slim.min.js. Это потому, что этот путь действителен в вашем источнике, но не в финальном пакете.
Например, если вы используете create-react-app, вы должны вместо этого поместить свои ресурсы (папку bootstrap) в папку public, поэтому используемый URL-адрес должен быть чем-то вроде "/bootstrap/jquery-3.2.1.slim.min.js".
Еще лучше: используйте переменную %PUBLIC_URL%.
См. https://facebook.github.io/create-react-app/docs/использование общедоступной папки
Я предполагал, что начальная загрузка будет правильно импортирована, если я добавлю путь к index.html, за исключением того, что я импортировал его неправильно. ТИЛ. Большое спасибо!
Можете ли вы показать нам структуру папок в вашем проекте?