add bootstrap colors

2022-07-01 02:18:04 +03:00 · 2022-07-01 02:18:04 +03:00 · 823f18c76c
commit 823f18c76c
parent dc74c49009
1 changed files with 87 additions and 0 deletions
--- a/content/posts/bootstrap-rebuild.md
+++ b/content/posts/bootstrap-rebuild.md
@ -0,0 +1,87 @@
+---
+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
+```