默认情况下,Angular 2将CSS编译成
JavaScript,特别是在Angular-CLI中使用WebPack时.我宁愿这不是因为几个原因而发生的.
第一个原因是,在开发中,我发现在开发人员工具中,确切地看到具体样式规则来自哪个样式表以及它的行号真的有帮助.第二个原因是我认为将CSS编译成错误的CSS CSS,这样可以应用不同的样式表,并使用相同的标记来完全不同的外观和感觉.
有没有一个标志,我可以设置离开CSS在.css文件,其中属于IMO？
这是封装组件的整体.
原文链接：https://www.f2er.com/angularjs/140612.html组件应该具有封装的自己的样式,因此可以随风格一起运送.
想象一下,您想发布其他组件以供其他人使用,不应该有自己的风格吗？
这意味着Angular需要一种将这些CSS链接到组件的方法,从而将它们分离成块,并将它们注入到头标中.
为了解决你的问题,你有几个选择：
1-不使用模拟封装：
默认情况下,组件具有称为“封装”的属性,该属性设置为“仿真”,您需要将其更改为“无”：
@Component({
encapsulation:ViewEncapsulation.None
})
然后,你可以把你所有的CSS放在你的头像你自己像一般的html页面.
@Component({
selector:'my-component',styles:[
`
:host{
[theme="blue"]{
change what ever you want :
h1{
color:blue;
}
}
}
`
]
})
然后,使用这个组件就像：
<my-component [attr.theme]='"blue"'></my-component> // would be blue theme <my-component></my-component> // would be default
