Блог

Главная - Вопросы по программированию - Bootstrap не интегрирован с Laravel 8

Bootstrap не интегрирован с Laravel 8

#php #laravel #twitter-bootstrap

#php #laravel #twitter-bootstrap

Вопрос:

Я решил попробовать bootstrap, и это было больно для меня, это не работает.

что я сделал:

 laravel new project
cd project
composer require laravel/ui
php artisan ui bootstrap
npm install amp;amp; npm run dev

Затем в welcome.blade.php Я меняю код на этот фрагмент, чтобы я мог протестировать bootstrap:

 <!doctype html>
<html>
<head>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
</body>
</html>

Я убедился, что они верны:

  1. В /resources/sass/app.scss есть импорт ‘~bootstrap/scss/bootstrap’;.
  2. Включает в себя HTML-страницу

Скриншот структуры файлов и конфигураций может помочь:

Структура файла

webpack.mix.js

app.scss

Примечания:

Я использую Laravel 8.

Был бы признателен за любую помощь.

Комментарии:

1. Вы действительно запускали npm run dev ? Это должно скомпилировать ваши ресурсы в public папку, я не вижу там никаких css / js. Вы получаете какие-либо ошибки?

2. ну, я скомпилировал его, ‘npm install amp;amp; npm run dev’, и я получил предупреждение, насколько я помню, но речь шла об обновлении чего-то, теперь я переделал компиляцию, и она сработала, спасибо!

3. На самом деле я попробовал это снова, мне нужно дважды запустить npm run dev, не знал, что

4. @import '~bootstrap/scss/bootstrap'; что это тогда?

5. Просто чтобы было понятно, в «рабочей» среде по умолчанию вам никогда не придется запускать npm run dev дважды, чтобы заставить его работать.

Ответ №1:

Вам нужно создать две папки с именем css и js внутри public папки. нажмите здесь для скриншота

Затем загрузите compiled bootstrap с https://getbootstrap.com/docs/5.1/getting-started/download / и извлеките загруженный файл.

Затем просмотрите css папку, которая находится внутри bootstrap и найдите bootstrap.min.css файл и найдите bootstrap.min.js файл из js папки.

Затем скопируйте эти файлы( bootstrap.min.css , bootstrap.min.js ) в соответствующие css js папки и соответственно в public папке.

Затем переименуйте bootstrap.min.css файл как app.css и переименуйте bootstrap.min.js как app.js .нажмите здесь для скриншота

Затем bootstrap успешно работает в вашем приложении laravel. С наилучшими пожеланиями,

Метки: