Теория: Установка

В базовом курсе Bootstrap рассматривалась установка фреймворка с помощью простого подключения готового CSS-файла.

Такой способ позволяет использовать возможности бутстрап как библиотеки:

• Добавление компонентов
• Утилиты
• Готовые базовые стили для страницы

При создании небольшого проекта, например, личной страницы, этих возможностей будет достаточно. Также Bootstrap подойдет, если вас устраивает дизайн-система и набор стандартных компонентов.

Если же задача состоит в создании нового дизайна в рамках системы Bootstrap, то необходимо использовать не готовый CSS-файл, а файлы препроцессора SASS.

В этом уроке мы узнаем, как добавить бутстрап в виде npm-пакета и подключить его к проекту.

Устанавливаем Bootstrap

Чтобы получить доступ к SASS-файлам, нужно установить проект в виде npm-зависимости. Для этого создайте директорию под проект и выполните команду npm install bootstrap. Предварительно инициализируйте npm-проект командой npm init:

Инициализация проекта

Установка Bootstrap

Для удобной работы с Bootstrap в вашей системе должен быть установлен препроцессор SASS и любой удобный сборщик. В качестве сборщика в этом курсе будет использован Gulp. Главное — быстро конвертировать SASS в CSS.

Подключаем Bootstrap

В ближайших уроках мы будем подключать Bootstrap полностью, но это не обязательно. В уроке про оптимизацию проекта мы научимся подключать только те компоненты и части бутстрап, которые нужны в нашем проекте.

После установки пакета главный файл SASS будет располагаться по пути директория-вашего-проекта/node_modules/bootstrap/scss/bootstrap.scss. Вот возможная структура проекта:

bootstrap-project/
├── app/
│   ├── scss/
│   │   └── main.scss
|   └── index.pug
├── build/
├── node_modules/
├── package-lock.json
├── package.json
└── gulpfile.js

В этой структуре файл SASS находится внутри директории app/scss, значит, подключение будет выглядеть так:

@import "../../node_modules/bootstrap/scss/bootstrap.scss";

После сборки проекта все стили будут переведены в обычный CSS. Для сборки используем Gulp с такой конфигурацией:

const { src, dest, parallel, watch } = require('gulp')
const concat = require('gulp-concat')
const sass = require('gulp-sass')(require('sass'))
const pug = require('gulp-pug')
const browserSync = require('browser-sync').create()

const browsersync = () => {
  browserSync.init({
    server: { baseDir: 'build/' },
    notify: false,
    online: true,
  })

  watch('./app/**/*.js', scripts)
  watch('./app/**/*.scss', sass2css)
  watch('./app/**/*.pug', pug2html)
}

const scripts = () => {
  return src([
    './node_modules/bootstrap/dist/js/bootstrap.min.js',
    './node_modules/bootstrap/dist/js/bootstrap.min.js.map',
  ])
    .pipe(dest('./build/js/'))
    .pipe(browserSync.stream())
}

const sass2css = () => {
  return src([
    './app/scss/main.scss',
  ])
    .pipe(sass())
    .pipe(concat('main.css'))
    .pipe(dest('./build/styles/'))
    .pipe(browserSync.stream())
}

const pug2html = () => {
  return src([
    './app/index.pug',
  ])
    .pipe(pug())
    .pipe(dest('./build/'))
    .pipe(browserSync.stream())
}

exports.build = parallel(scripts, sass2css, pug2html)
exports.default = browsersync

Вы можете скопировать структуру из урока, установить нужные пакеты и использовать приведенный Gulp-файл.

Выводы

Если в проекте используется Bootstrap с собственным дизайном, то вместо исправления CSS-файла стоит подключить фреймворк с помощью npm. Для этого используется команда npm install bootstrap, которая установит последнюю версию бутстрапа.

Для подключения всего бутстрап достаточно подключить основной файл bootstrap.scss, который находится по пути node_modules/bootstrap/scss/.

Чтобы комфортно работать с бутстрап, необходимо иметь установленный препроцессор SASS, который сможет компилировать файлы препроцессора в CSS. Полезным будет использование сборщика проектов или таск-менеджера, например, Gulp.

В рамках обучения на Хекслете есть курсы по SASS и Gulp. Ссылки на курсы будут в конце этого урока.