从angular2组件样式表中的Bootstrap覆盖样式 [英] Overwriting styles from Bootstrap in an angular2 component-stylesheet

问题描述

我有一个angular2应用程序构建，其中包含几个组件的angular-cli.每个组件都有一个引用的样式(scss).

I have an angular2 application build with angular-cli containing several components. Each component has a referenced stylsheed (scss).

这些样式表中的独特样式正确地应用于了组件模板.

Unique styles from those stylesheets are correctly applied to the component-template.

我不能做的是覆盖外部CSS的样式，这些样式包含在这些组件样式表的angular-cli中.

What I cannot do is overwrite styles from external css's which are included in the angular-cli from those component-stylesheets.

将样式移到中央styles.scss后，它就会起作用.

As soon as I move the style to the central styles.scss it works.

我的angular-cli.json看起来像这样:

My angular-cli.json looks like this:

  "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"
  ],

有什么想法可以覆盖component.scss中的bootstrap-css吗?

Any Ideas how I can overwrite the bootstrap-css in the component.scss?

推荐答案

我也已将此问题发布为angular-cli项目的可能错误，并得到了我需要的提示:

I've also posted this question as a possible bug to the angular-cli project and got the hint I needed:

模拟视图封装(默认设置)通过预处理(和重命名)CSS代码来模拟Shadow DOM的行为，以有效地将CSS限制在组件的视图范围内.如果这些类因这种行为而被重命名，则它将无法正常工作，并且我无法从ie中覆盖样式.引导程序.

Emulated view encapsulation (the default) emulates the behavior of Shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. If those classes got renamed for this behaviour, it cannot work and I cannot override styles from ie. bootstrap.

如果我现在将组件中的封装设置为无，则可以正常工作，并且可以覆盖component.scss中的样式.

If I now set the encapsulation in the component to none, it works and I can override the styles in the component.scss.

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

这篇关于从angular2组件样式表中的Bootstrap覆盖样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！