В Laravel 5.5 CSS-фреймверк Bootstrap 3 устанавливается по-умолчанию. Однако он уже устарел и необходимо переходить на новую версию. Как это сделать? Для замены Bootstrap 3 на Bootstrap 4 в Laravel 5.5, нужно выполнить следующие шаги.

Шаг 1 - Удаление старого Bootstrap 3

Необходимо убрать из системы старый Bootstrap командой:

npm uninstall --save-dev bootstrap-sass

Шаг 2 - Установка нового Bootstrap 4

Новый Bootstrap 4, по некоторым рекомендациям из интернета, должен ставится вместе со скриптом popper.js

npm install --save-dev bootstrap@^4.3.1 popper.js

Шаг 3 - Изменения в настройках

В файле resources/assets/js/bootstrap.js необходимо заменить:

try {

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');

} catch (e) {}

на

try {

window.$ = window.jQuery = require('jquery');

window.Popper = require('popper.js').default;

require('bootstrap');

} catch (e) {}

Далее, в файле resources/assets/sass/app.scss необходимо заменить

@import "~bootstrap-sass/assets/stylesheets/bootstrap"

на

@import "~bootstrap/scss/bootstrap.scss"

И в файле resources/assets/sass/_variable.scss нужно изменить строку:

$font-size-base: 14px;

на

$font-size-base: 0.875rem;

Шаг 4 - Перекомпиляция ресурсов

Для перекомпиляции ресурсов нужно запустить команду:

npm run dev

Она должна завершиться без ошибок.

Примечание для тех, кто пытается переключиться на Bootstrap по статье https://medium.com/@sasthakl/upgrading-laravel-5-5-to-bootstrap-4-fe11714fbdaa . Если вы получаете ошибку вот такого вида:

ERROR in ./node_modules/css-loader??ref--8-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--8-4!./node_modules/sass-loader/lib/loader.js??ref--8-5!./resources/assets/sass/app.scss

Module build failed:

@import “~bootstrap/scss/bootstrap.scss”

^

@import directive requires a url or quoted path

in /site/resources/assets/sass/app.scss (line 10, column 1)

@ ./resources/assets/sass/app.scss 4:14-266

@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed:

@import “~bootstrap/scss/bootstrap.scss”

^

@import directive requires a url or quoted path

in /site/resources/assets/sass/app.scss (line 10, column 1)

at runLoaders (/site/node_modules/webpack/lib/NormalModule.js:195:19)

at /site/node_modules/loader-runner/lib/LoaderRunner.js:367:11

at /site/node_modules/loader-runner/lib/LoaderRunner.js:233:18

at context.callback (/site/node_modules/loader-runner/lib/LoaderRunner.js:111:13)

at Object.asyncSassJobQueue.push [as callback] (/site/node_modules/sass-loader/lib/loader.js:55:13)

at Object.done [as callback] (/site/node_modules/neo-async/async.js:8067:18)

at options.error (/site/node_modules/node-sass/lib/index.js:294:32)

@ ./resources/assets/sass/app.scss

@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`

npm ERR! Exit status 2

... то проверьте изменения, вносимые вами в файлы настроек. Возможно, вместо обычных двойных кавычек " у вас используются открывающиеся и закрывающиеся двойные кавычки “”, так как на вышеуказанном сайте ради красивой типографики изменяются даже блоки с кодом.