🏴‍☠️
Сашка ☕
Blog  Tags  💀 🔵 🔴

Пересборка Bootstrap ради замены цветов

Опубликовано: 1 июля 2022 г.

На странице документации Customize/Color написано, что Bootstrap поддерживает обширную цветовую схему и их можно изменять под проект:

Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

Цвета темы (Primary, Success, Dark, Light) лежат в файле scss/_variables.scss, переменная $theme-colors.

All these colors are available as a Sass map, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Подготавливаем Bootstrap

Клонируем репозиторий

git clone --depth 1 --branch v5.1.3 https://github.com/twbs/bootstrap.git bootstrap-color/

Скачиваем зависимости Node.js, это займёт некоторое время:

npm update

Правка цветов

Изменяем "primary": $primary, на "primary": #2fb658,.

Компиляция и минификация

Выполняем команду npm run css для сборки css и минификации.

npm run css

Если необходимо просто скомпилировать css, выполняем npm run css

npm run css-compile

Дожидаемся окончания… Готово.

Файлы лежат в директории dist/.

Проверить, что CSS изменились, можно выполнив проверку состояния изменений Git репозитория.

git status

Увидим что-то вроде

$ git st
Not currently on any branch.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   dist/css/bootstrap-grid.css
        modified:   dist/css/bootstrap-grid.css.map
        modified:   dist/css/bootstrap-grid.min.css
        ...
        modified:   dist/css/bootstrap.css
        modified:   dist/css/bootstrap.css.map
        modified:   package-lock.json
        modified:   scss/_variables.scss