Использование Bootstrap CSS и JS

Хотите использовать в вашем проекте Bootstrap (или что-то подобное)? Не проблема! Для начала, установите его. Чтобы иметь возможность дальнейшей настройки, мы установим bootstrap-sass:

1
$ yarn add bootstrap-sass --dev

Испорт Sass Bootstrap

Теперь, когда bootstrap-sass живёт в вашем каталоге node_modules, вы можете импортировать его из любого файла Sass или JavaScript. Например, если у вас уже есть файл global.scss, импортируйте его отсюда:

1
2
3
4
5
6
7
// assets/css/global.scss

// настройте некоторые переменные Bootstrap
$brand-primary: darken(#428bca, 20%);

// ~ позволяет вам ссылаться на вещи в node_modules
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Вот и всё! Так импортируется файл node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss в global.scss. Вы можете даже вначале настроить переменные Bootstrap!

Tip

Если вам не нужны все функции Bootstrap, вы можете вместо этого включить конкретные файлы в каталог bootstrap - например, ~bootstrap-sass/assets/stylesheets/bootstrap/alerts.

После включения bootstrap-sass, ваши построения Webpack могут стать медленными. Чтобы исправить это, вы можете использовать опцию resolveUrlLoader:

1
2
3
4
5
6
// webpack.config.js
Encore
+     .enableSassLoader(function(sassOptions) {}, {
+         resolveUrlLoader: false
+     })
;

Это отключает resolve-url-loader в Webpack, что значит, что любые пути url() в ваших файлах Sass должны теперь иметь связь с первоначальным исходным файлом, вместо того файла, что вы используете внутри (смотрите Проблемы с url()). To load Bootstrap, you'll need to override the path to its icons:

1
2
3
4
5
6
7
8
// assets/css/global.scss

+ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";

+ // установите, еслив вы также включаете font-awesome
+ // $fa-font-path: "~font-awesome/fonts";

@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Импорт Java-скрипта Bootstrap

Java-скрипт Bootstrap требует jQuery, так что убедитесь, что он у вас установлен:

1
$ yarn add jquery --dev

Далее, не забудьте вызвать .autoProvidejQuery() в вашем файле webpack.config.js:

1
2
3
4
5
// webpack.config.js
Encore
    // ...
+     .autoProvidejQuery()
;

Это необходимо, потому что Bootstrap ожидает, что jQuery будет доступен в качестве глобальной переменной. Теперь, запросите bootstrap из любого вашего Java-скрипт файла:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// main.js

var $ = require('jquery');
// JS эквивалентно любому нормальному пакету "bootstrap"
// не надо устанавливать это в переменную, просо запросите его
require('bootstrap-sass');

// или вы можете включить конкретные части
// require('bootstrap-sass/javascripts/bootstrap/tooltip');
// require('bootstrap-sass/javascripts/bootstrap/popover');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});

Благодаря autoProvidejQuery(), вы можете запросить любые другие плагины jQuery подобным образом:

1
2
3
4
5
6
7
// ...

// запросите Java-скрипт
require('bootstrap-star-rating');
// запросите необходимые 2 CSS-файлы
require('bootstrap-star-rating/css/star-rating.css');
require('bootstrap-star-rating/themes/krajee-svg/theme.css');

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.