Blog/content/posts/2022/bootstrap-rebuild.md

88 lines
2.6 KiB
Markdown
Raw Normal View History

2022-07-01 02:18:04 +03:00
---
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
```