Как использовать Bootstrap 4 с SASS в Angular

Ответ 1

Чтобы настроить Angular + Bootstrap 4 с помощью SASS, нам просто нужно настроить CLI Angular и установить пакет Bootstrap 4 npm. Нет необходимости устанавливать какой-либо компилятор SASS, поскольку он уже включен.

1) Настройте Angular CLI для использования SASS вместо CSS

Run:

ng set defaults.styleExt scss

это повлияет на ваш конфигурационный файл .angular-cli.json (пример).

Примечание: если вы начинаете с нуля, вы можете создать новый проект с помощью Angular CLI, используя: ng new my-project --style=sass что эквивалентно созданию нового проекта, а затем выполняется команда, упомянутая выше.

2) Измените существующие стили компонентов с CSS на SASS (если есть)

Для этого вам просто нужно переименовать файл стиля из .css в .scss и соответствующим образом изменить конфигурацию @Component({ ... }):

styleUrls: ['./my-component.scss']

(пример).

Таким образом, angular -cli будет автоматически просматривать и перекомпилировать эти файлы всякий раз, когда они меняются во время выполнения команд типа ng serve.

3) Добавить Bootstrap 4

Установите Bootstrap 4 через npm:

npm install bootstrap --save

Теперь добавьте Bootstrap в конфигурацию .angular-cli.json внутри массива styles (перед любыми другими пользовательскими css/scss файлами, чтобы позволить им переопределять правила начальной загрузки:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

(пример).

Таким образом, исходный код Bootstrap 4 останется чистым, и его будет легко обновить каждый раз, когда будет выпущена новая версия.

4) Добавьте свои пользовательские (глобальные) файлы SASS

Любые дополнительные стили SASS, которые должны глобально влиять на проект (в отличие от отдельных стилей компонентов), можно добавить в app/assets/scss, а затем указать в массиве styles .angular-cli.json.

Мое предложение состоит в ссылке на один файл main.scss, который будет содержать все ваши собственные стили SASS: например, _variables.scss для ваших пользовательских переменных, файл _global.scss для ваших глобальных правил и т.д. (пример).

Итак, в вашем .angular-cli.json вы укажете только один пользовательский файл main.scss:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

который внутренне включает весь ваш пользовательский глобальный код * SASS:

// main.scss 
@import "variables";
@import "global";
// import more custom files...

* Обратите внимание, что вы НЕ ДОЛЖНЫ включать здесь файлы стиля *.scss для отдельных компонентов.

5) Включите замену JavaScript для загрузки и jQuery.

Есть несколько проектов, которые позволяют использовать Bootstrap без jQuery.

Два примера:

• ngx-bootstrap

• ng-bootstrap

Разница между этими двумя проектами обсуждается здесь: В чем разница между "ng-bootstrap" и "ngx-bootstrap" ,

Ответ 2

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

Итак, вы заменили:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

С

"styles": [
  "assets/scss/main.scss"
],

Тогда ваш main.scss будет выглядеть так:

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";