Переписывающие стили из Bootstrap в угловом2 таблице стилей компонентов

Question

У меня есть приложение для построения углового2 с угловым cli, содержащим несколько компонентов. Каждый компонент имеет ссылку stylsheed (scss).

Уникальные стили из этих таблиц стилей правильно применяются к шаблону компонента.

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

Как только я перехожу к центральному стилю.scss, он работает.

Мой угловой cli.json выглядит следующим образом:

"styles": [ 
    "../node_modules/bootstrap/dist/css/bootstrap.css", 
    "../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css", 
    "../node_modules/bootstrap-timepicker/css/bootstrap-timepicker.css", 
    "styles.scss" 
    ], 

Любые идеи, как я могу переписать бутстраповское-CSS в component.scss?

Answer 1

Я также отвечал на этот вопрос в качестве возможной ошибки в угловом-кли проекта и получил намек мне нужно:

Эмуляция вид инкапсуляция (по умолчанию) эмулирует поведение Shadow DOM путем предварительной обработки (и переименовывать) CSS-код для эффективного охвата CSS в представлении компонента. Если эти классы были переименованы для этого поведения, это не сработает, и я не могу переопределить стили от ie. самозагрузки.

Если я теперь установил инкапсуляцию в компоненте в none, она работает, и я могу переопределить стили в компоненте.scss.

@Component({ 
    selector: 'app-generic-view', 
    templateUrl: './generic-view.component.html', 
    styleUrls: ['./generic-view.component.scss'], 
    encapsulation: ViewEncapsulation.None 
})