2.6 KiB
| title | date | draft | tags | ||
|---|---|---|---|---|---|
| Пересборка Bootstrap ради замены цветов | 2022-07-01T01:35:42+03:00 | false |
|
На странице документации 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.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Подготавливаем Bootstrap
Клонируем репозиторий
git clone --depth 1 --branch v5.1.3 https://github.com/twbs/bootstrap.git bootstrap-color/
Скачиваем зависимости Node.js, это займёт некоторое время:
npm update
Правка цветов
Изменяем "primary": $primary, на "primary": #2fb658,.
Компиляция и минификация
Выполняем команду npm run css для сборки css и минификации.
npm run css
Если необходимо просто скомпилировать css, выполняем npm run css
npm run css-compile
Дожидаемся окончания... Готово.
Файлы лежат в директории dist/.
Проверить, что CSS изменились, можно выполнив проверку состояния изменений Git репозитория.
git status
Увидим что-то вроде
$ 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