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

我有一个angular-cli应用程序并使用webpack。当我尝试运行它的成分具有特异性的CSS不起作用Angular-cli构建生成的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.component.css成styles.css然后它的工作原理，但它在生成的html中出现两次

我正在寻找这样做的正确方法

来源

2017-08-30 Theo

也许是因为我混合scss和css？ – Theo

我在这里找到了我的问题的答案：https://stackoverflow.com/questions/45788972/how-to-hide-ngb-carousel-indicators-and-prev-next-control – Theo

默认情况下（如在你的情况下）角度使用ViewEncapsulation.Emulated范围你的CSS。但是，有在角3个视图封装选项：

本地视图封装使用浏览器的原生影子DOM实现（见影子DOM的MDN网站）阴影DOM附加到组件的主元素，然后将组件视图放入该影子DOM中。组件的样式包含在阴影DOM中。
仿真视图封装（默认值）模拟阴影DOM的通过预处理（和重命名）CSS代码有效范围的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，然后在styles.css引用您的component.css是competent风格只是在你的HTML被加倍：一个副本是一个全球性的小号tyle和其他副本是作用域组件样式。

我试图复制你的问题，但我的compentnt.css总是得到应用。我正在使用最新的稳定角度cli 1.3.2。如果您使用较旧的cli，请尝试更新。否则，请在github上推送您的代码或创建一个活塞，以便我可以看一看。

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

来源

2017-08-30 04:08:04 Kuncevic

我更新了我的角度cli，我仍然有错误。我认为这是因为我使用ng-boostrap组件（传送带），因为如果我将css放入另一个组件中，它可以正常工作 – Theo

所有会员这里登陆：

的问题是与ViewEncapsulation.Emulated我把它改成ViewEncapsulation.None在这个计算器的答案描述：

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

感谢您的帮助

来源

2017-08-30 22:11:04 Theo

'ViewEncapsulation.None'将您的'component.css'样式添加到全局样式，那是什么。也是这样，你的组件样式放弃了范围等。 – Kuncevic

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

回答

相关问题