2022-07-01 02:18:04 +03:00
|
|
|
|
---
|
2022-11-19 03:36:06 +03:00
|
|
|
|
title: "🟩 Пересборка Bootstrap ради замены цветов"
|
2022-07-01 02:18:04 +03:00
|
|
|
|
date: 2022-07-01T01:35:42+03:00
|
|
|
|
|
|
draft: false
|
2022-12-28 00:46:21 +03:00
|
|
|
|
tags: [web, bootstrap-css, css]
|
2022-07-01 02:18:04 +03:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
На странице документации [**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
|
|
|
|
|
|
```
|
