88 lines
2.6 KiB
Markdown
88 lines
2.6 KiB
Markdown
---
|
||
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
|
||
```
|