Blog/content/posts/2022/bootstrap-rebuild.md
2022-11-19 03:36:06 +03:00

88 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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
```