Question

我有一个angular-cli应用程序并使用webpack。当我尝试运行它时，组件特定的css不起作用

styles.css的

    /* You can add global styles to this file, and also import other style files*/
@import 'http://something/v4/dist/css/bootstrap.min.css';

组件

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit {

组件CSS

.carousel-indicators { display: none; }

角cli.config

 "styles": [
        "styles.css",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-light.scss",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss"       
      ],

呈现的HTML

<style type="text/css">@import url(http://something/v4/dist/css/bootstrap.min.css);</style>
<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style><style></style><style>.carousel-indicators[_ngcontent-c5] { display: none; }</style>

但这不适用于我的html元素'carousel-indicators' 如果我将carousel.component.css导入styles.css，那么它可以正常工作，但在生成的html中会出现两次

我正在寻找正确的方法

Answer 1

默认情况下（如您的情况）使用ViewEncapsulation.Emulated对您的CSS进行范围调整。但是Angular中有3个视图封装选项：

原生视图封装使用浏览器的本机影子DOM实现（请参阅MDN网站上的Shadow DOM）将影子DOM附加到组件的主机元素，然后将组件视图放在该shadow DOM中。组件的样式包含在shadow DOM中。
模拟视图封装（默认）通过预处理（和重命名）CSS代码来模拟shadow DOM的行为，从而有效地将CSS范围扩展到组件的视图。有关详细信息，请参阅附录1.
无表示Angular不进行视图封装。 Angular将CSS添加到全局样式中。前面讨论的范围规则，隔离和保护不适用。这与将组件的样式粘贴到HTML中基本相同。

因此，当您在component component.css中使用任何样式（默认为ViewEncapsulation.Emulated）时，样式将仅适用于该特定组件，它不会被泄露在组件外部，除了全局样式!important之外，总是优先于全局样式。

因此，您可以在html文件的头部使用样式，如：

<style>.carousel-indicators[_ngcontent-c5] { display: none; }</style>

如果您在component.css中引用styles.css，那么它将成为html头中呈现的全局样式，如下所示：

<style type="text/css">/* You can add global styles to this file, and also import other style files */
.carousel-indicators {
  display: none; }
</style>

当您在competent中声明自己的风格，然后在component.css中引用了styles.css时，competent样式只会在您的html中加倍：一个副本是全局样式，其他副本是作用域组件样式。

我曾尝试复制您的问题但我的compentnt.css始终会被应用。我正在使用最新的稳定角度cli 1.3.2。如果您使用较旧的cli尝试更新。否则在github上推你的代码或创建一个plunker所以我可以看看。

更新：您可能会让您的自定义css被您引用的某些全局样式表覆盖。您可以使用chrome dev工具调试样式，也可以尝试将!important添加到自定义css，看看它是否有帮助。

Answer 2

对于每个登陆这里的人：

问题在于ViewEncapsulation.Emulated我将其更改为ViewEncapsulation.None，如此stackoverflow答案所述：

how to hide ngb-carousel indicators and prev-next control

感谢您的帮助

Angular-cli构建生成的CSS不起作用

2 个答案: