Как правильно подключить бутстрап локально, если я использую Gulp и scss?

от
prokoding.ru > Bootstrap > Как правильно подключить бутстрап локально, если я использую Gulp и scss?

Для правильной локальной установки Bootstrap в проекте, использующем Gulp и SCSS, следуйте следующим шагам:

Шаг 1: Установка Bootstrap и его зависимостей
Установите Bootstrap, jQuery и Popper.js, используя npm или yarn:

npm install bootstrap jquery popper.js

или

yarn add bootstrap jquery popper.js

Шаг 2: Создание файловой структуры проекта
Создайте структуру каталогов для SCSS файлов, например:

- src
  - scss
    - _custom.scss
    - main.scss

Шаг 3: Подключение Bootstrap
Отредактируйте файл main.scss, чтобы подключить Bootstrap и определить ваши пользовательские стили в _custom.scss.

// Подключение Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

// Ваши пользовательские стили
@import "_custom";

Шаг 4: Компиляция SCSS
Добавьте задачу ком­пи­ля­ции SCSS файлов в ваш файл gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass', function () {
    return gulp.src('src/scss/main.scss')
               .pipe(sass())
               .pipe(gulp.dest('dist/css'));
});

Запустите задачу sass в вашей командной строке:

gulp sass

Шаг 5: Подключение скриптов Bootstrap
Добавьте следующий код в ваш HTML файл для подключения jQuery, Popper.js и скриптов Bootstrap:

<!-- Подключение jQuery -->
<script src="../node_modules/jquery/dist/jquery.min.js"></script>

<!-- Подключение Popper.js -->
<script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>

<!-- Подключение Bootstrap JavaScript -->
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Шаг 6: Проверка работоспособности
Убедитесь, что Bootstrap успешно подключен, создав простую HTML страницу:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="dist/css/main.css">
    <title>My Bootstrap Page</title>
</head>
<body>
    <h1>Hello, Bootstrap!</h1>

    <button class="btn btn-primary">Click me</button>

    <script src="dist/js/main.js"></script>
</body>
</html>

Запустите HTML страницу и проверьте, что Bootstrap работает корректно.

Теперь вы должны иметь правильно подключенный локальный Bootstrap в вашем проекте, использующем Gulp и SCSS. Вы можете модифицировать пользовательские стили в файле _custom.scss и использовать все возможности Bootstrap в вашем проекте.