diff --git a/content/posts/bootstrap-rebuild.md b/content/posts/bootstrap-rebuild.md new file mode 100644 index 0000000..0ef4a33 --- /dev/null +++ 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 ..." to update what will be committed) + (use "git restore ..." 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 +```