Как скомпилировать и кастомизировать Bootstrap под свои нужды

Компилирование Bootstrap под свои нужды – это первая задача, которую решает веб-разработчик когда его квалификация повышается до продвинутого уровня. Действительно: низкий порог вхождения позволяет новичкам с базовыми навыками HTML/CSS/JS разрабатывать веб-сайты быстро, адаптивно и кроссбраузерно. Однако когда начинается поисковая оптимизация проекта, проводятся аудиты и проверки, выясняется, что одним из самых “тяжелых” ресурсов является файл стилей bootstrap.css. Отчасти проблему решает его минификация и оптимизация загрузки, однако принципиальным вопросом является следующий:

Нужны ли мне в конкретном проекте абсолютно все стили и скрипты дистрибутива Bootstrap?

Именно этот вопрос мы попробуем решить сегодня.

Подготовка к работе (платформа Windows x64)

Прежде всего, определимся с папками. Мы будем работать с двумя: папкой дистрибутива Bootstrap и папкой, в которой будут создаваться выходные bootstrap.css и bootstrap.map. Для примера используем папки D:\Bootstrap и D:\Custom соответственно.

Следующий момент – скачивание компилятора Dart Sass из Git-репозитория. Для того, чтобы избежать лишних сложностей, связанных с обработкой несуществующих “цветовых” функций и прекращения поддержки директивы @import, рекомендую скачать версию 1.78, в которой эти проблемы еще не существовали. О том, как использовать последние версии Dart Sass с Bootstrap, расскажем отдельно.

Теперь скачаем последнюю версию Bootstrap. Нас будет интересовать исходник, доступный по ссылке Download source. Откроем архив и скопируем содержимое папки scss в папку D:\Bootstrap. Из нее скопируем файл bootstrap.scss в папку D:\Custom. Здесь же создадим пустой файл custom.scss. Дальше мы будем работать только с этими двумя файлами, не затрагивая эталонный дистрибутив.

Кастомизируем файлы настроек

Сначала займемся файлом bootstrap.scss. Как видим, в нем организована подгрузка всех компонентов Bootstrap:

@import "mixins/banner";
@include bsBanner("");


// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
// ...

Однако эта история рассчитана на присутствие в папке этих самых компонентов. Поэтому нам необходимо подкорректировать директивы @import:

// Было:
@import "functions";

// Стало:
@import "../Bootstrap/functions";

Как видим, мы просто указали правильные пути к нашему дистрибутиву. Нам осталось только в самой первой строке указать подключение нашего кастомного файла:

@import "custom";

Расширение указывать необязательно. Этот пока еще пустой файл находится в папке Custom и отвечает за переназначение переменных Bootstrap. Если какая-либо переменная определена в этом файле, то в эталонном _variables.scss она будет проигнорирована. Именно то, что нам необходимо.

Компилируем Bootstrap

Попробуем пересобрать bootstrap.css, для начала с минимальными корректировками. Для этого укажем в custom.scss всего одну переменную:

$enable-rounded: false;

Она отвечает за глобальное скругление углов элементов форм, обводок и др. Присвоив ей значение false, мы проконтролируем правильность выполнения компиляции.

Теперь запустим интерпретатор командной строки (Win + R -> cmd -> Enter), перейдем в папку Custom и откомпилируем наш Bootstrap:

sass bootstrap.scss bootstrap.css

Если, подключив выходной файл bootstrap.css к проекту мы увидим, что все углы потеряли скругление при отсутствии каких-либо ошибок верстки, значит все выполнено правильно.

Что дальше?

Теперь, когда в распоряжении веб-разработчика находится рабочий инструментарии для компиляции фреймворка Bootstrap, можно начинать его оптимизацию под конкретные нужды.

Поэтому прежде всего, рекомендую изучить содержание всех подгружаемых компонентов. Если они не нужны и в перспективе не будут востребованы целиком, отключайте. Возможно, задача состоит в “облегчении” компонента, а может оптимальнее будет создать свой кастомный функционал.

Благодаря этому, вы получите собственный инструментарий, который будет функционировать на основе и во взаимодействии с базовыми компонентами Bootstrap.

Заключение

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

Ранее мы также разбирали кастомизацию, только в этот раз – страницы блокировки регистрации.