---
title: "Пересборка Bootstrap ради замены цветов"
date: 2022-07-01T01:35:42+03:00
draft: false
tags: [web, bootstrap]
---

На странице документации [**Customize/Color**](https://getbootstrap.com/docs/5.1/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.

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

```

### Подготавливаем Bootstrap
Клонируем репозиторий

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

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

```sh
npm update
```

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

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

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

```sh
npm run css
```

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

```sh
npm run css-compile
```

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

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

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

```sh
git status
```

Увидим что-то вроде
```sh
$ 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
```