MyTetra Share
Делитесь знаниями!
Как установить Bootstrap 4 в Laravel 5.5 - 5.8 вместо Bootstrap 3
26.08.2019
15:09
Автор: xintrea
Текстовые метки: laravel, bootstrap, bootstrap 3, bootstrap 4, css, настройка, переключение
Раздел: Компьютер - Программирование - Язык PHP - Laravel

В 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



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



Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования