Stackblitz: как импортировать фреймворк Bootstrap CSS

Я только что нашел удивительный Stackblitz онлайн-редактор VS-кода. Я создал проект Angular и под зависимостями установил фреймворк Bootstrap CSS, но как мне импортировать Bootstrap в мой проект? Обычно я делаю это, добавляя эту строку кода в angular -cli.json:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Но как это работает на Stackblitz?

Спасибо

Ответы

Ответ 1

В зависимостях добавьте "bootstrap", затем нажмите enter.

затем напишите следующую строку в styles.css в папке src

@import '~bootstrap/dist/css/bootstrap.min.css';

Ответ 2

попробуйте следующее:

style.css

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css')

Он загрузит все ваши значки глификона

Ответ 3

В angular.json:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
],

У меня работает просто отлично.

Ответ 4

  1. Откройте файлы стилей по адресу: src/styles.css

  2. Добавьте эту строку: @import url('https://unpkg.com/bootstrap/dist/css/bootstrap.min.css');

  3. Выберите меню ЗАВИСИМОСТЬ в левой части экрана. Есть входные данные: "введите URL-адрес js/css cdn"

  4. Напишите: https://code.jquery.com/jquery-3.3.1.slim.min.js и нажмите ввод.
  5. Написать : https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js и нажмите ввод.

Теперь вы можете использовать большинство загрузочного компонента, например кнопки и модальные и т.д....

Ответ 5

Проверьте этот пример StackBlitz: https://stackblitz.com/edit/angular-wkc7ix?file=styles.css

У него есть файл angular -cli.json и файл style.css

angular -cli.json:

{
  "apps": [{
    "styles": ["styles.css"]
  }]
}

style.css:

@import "bootstrap/dist/css/bootstrap.min.css";

Ответ 6

Довольно старый вопрос, но в любом случае это будет полезно для любого, кто хочет включить загрузчик в Stackblitz.

Шаг 1: Перейдите в app.module.ts и напишите

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Stackblitz автоматически предложит вам установить модуль ng-bootstrap.

Шаг 2: Добавьте NgbModule в массив импорта.

imports:      [ BrowserModule, FormsModule, NgbModule ],

Шаг 3: В вашем styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';

Теперь вы должны получать глифы в вашем проекте Angular.

Ответ 7

  1. Введите bootstrap в поле ввода имени пакета раздела Dependencies.
  2. Добавьте "node_modules/bootstrap/dist/css/bootstrap.min.css" в раздел стилей файла angular.json.