Angular cli生成的CSS不工作

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

样式。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; }

angular 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>

@导入url(http://something/v4/dist/css/bootstrap.min.css);
/*可以将全局样式添加到此文件，也可以导入其他样式文件*/
.carousel指示器[\ngcontent-c5]{显示：无；}

但这不适用于我的html元素“carousel indicators” 如果我将

carousel.component.css

导入

styles.css

中，那么它可以工作，但在生成的html中会出现两次

我正在寻找一种正确的方法来实现这一点，默认情况下（如您的情况），使用范围为css的angular。但是，Angular中有3个视图封装选项：

• Native视图封装使用浏览器的本机阴影DOM实现（请参阅MDN站点上的阴影DOM）将阴影DOM附加到组件的主机元素，然后将组件视图放入该阴影DOM中。组件的样式包含在阴影DOM中

• Emulated视图封装（默认）通过预处理（和重命名）CSS代码来模拟阴影DOM的行为，从而有效地将CSS范围限定到组件的视图。详情见附录1

• None表示Angular不进行视图封装。Angular将CSS添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到HTML中基本相同

因此，当您在

component.css

中将任何样式应用于

组件

时（默认情况下），样式将仅应用于该特定组件，不会泄漏到组件外部，并且始终优先于全局样式，除非全局样式具有

！重要信息

因此，您的html文件头中有如下样式：

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

正如您在

competable

中声明您的样式，然后在

styles.css

中引用您的

component.css

一样，

competable

样式在html中只会加倍：一个副本是全局样式，另一个副本是范围内的组件样式

我试图复制您的问题，但我的

compentnt.css

始终得到应用。我正在使用最新的stable angular cli

1.3.2

。如果您使用的是较旧的cli，请尝试更新。否则，将代码推到github上或创建一个plunker，以便我可以查看

---

更新：您的自定义

css

可能会被您正在引用的一些全局样式表覆盖。您可以使用chrome开发工具调试样式，也可以尝试放置

！重要信息

到您的自定义

css

并查看它是否有帮助。

对于登陆此处的每个人：

---

问题在于

视图封装。模拟的
我将其更改为
视图封装。无
如本回答中所述：


感谢您的帮助
可能是因为我混合了SCS和css？我在这里找到了问题的答案：我更新了angular cli，但仍然存在错误。我认为这是因为我使用的是ng boostrap组件（carousel），因为如果我将css放在另一个组件中，它可以很好地
ViewEncapsulation。无
将您的
组件.css
样式添加到全局样式中，这就是它。同样，这样你的组件样式就会失去作用域，等等。
<style type="text/css">/* You can add global styles to this file, and also import other style files */
.carousel-indicators {
  display: none; }
</style>