ng-bootstrap: использовать scss в проекте

В моем проекте angular используется scss, и до того, как я переключился на ng-bootstrap, я следовал этому руководству, чтобы интегрировать bootstrap с scss в мой проект angular: https://shermandigital.com/blog/bootstrap-sass-with-angular-cli/

Теперь я перешел на ng-bootstrap. Есть что-то подобное?


angular ng-bootstrap
person netshark1000    schedule 25.10.2017    source источник
comment
ng-bootstrap — это всего лишь группа виджетов. Если вы уже используете загрузчик 4.0.0, ваши компоненты будут работать правильно, иначе обновите загрузчик до последней версии.   -  person Eliseo    schedule 25.10.2017
comment
нет, в настоящее время он не работает. Начальная загрузка не применяется. Что нужно, чтобы найти ошибку?   -  person netshark1000    schedule 25.10.2017
comment
Конечно, вы используете bootstrap 4.0. поместите компонент ‹ button type=button class=btn btn-outline-primary ›Primary‹ /button ›. Если кнопка не обведена, это проблема   -  person Eliseo    schedule 25.10.2017
comment
Bootstrap не устанавливается автоматически как зависимость, если я устанавливаю ng-bootstrap?   -  person netshark1000    schedule 25.10.2017
comment
НЕТ. Более того, ng-bootstrap НЕ использует javascript начальной загрузки. Нужен только bootstrap.css. Это потому, что я сказал вам, что если вы используете загрузку с помощью scss, вы уже это получите.   -  person Eliseo    schedule 25.10.2017
comment
Я обнаружил, что мне нужен импорт в main.scss: @import ../../node_modules/bootstrap/scss/bootstrap;   -  person netshark1000    schedule 25.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Net, в угловом проекте вы пишете

npm install --save @ng-bootstrap/ng-bootstrap

В вашем основном модуле.ts импортируйте {NgbModule} из '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

ИЛИ в модуле.ts

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

затем вы можете написать в компоненте, например.

<button type="button" class="btn btn-outline-secondary" placement="top" ngbTooltip="Tooltip on top">
  Tooltip on top
</button>

Если у вас УЖЕ есть импорт bootstrap.css.4.0 ЛЮБЫМ СПОСОБОМ (*), вы можете увидеть всплывающую подсказку правильно, если нет, вы можете увидеть всплывающую подсказку, но плохо отформатированную.

(*) просто стоило бы импортировать css в angular-cli.json add

"styles": [
        "styles.css",
        "../bootstrap.css"
      ],
person Eliseo    schedule 26.10.2017