在Angular 2 / Angular-CLI中将CSS从JS中保留下来

发布时间：2020-12-17 09:27:11 所属栏目：安全来源：网络整理

导读：默认情况下,Angular 2将CSS编译成 JavaScript,特别是在Angular-CLI中使用WebPack时.我宁愿这不是因为几个原因而发生的. 第一个原因是,在开发中,我发现在开发人员工具中,确切地看到具体样式规则来自哪个样式表以及它的行号真的有帮助.第二个原因是我认为将CSS

默认情况下,Angular 2将CSS编译成 JavaScript,特别是在Angular-CLI中使用WebPack时.我宁愿这不是因为几个原因而发生的.

第一个原因是,在开发中,我发现在开发人员工具中,确切地看到具体样式规则来自哪个样式表以及它的行号真的有帮助.第二个原因是我认为将CSS编译成错误的CSS CSS,这样可以应用不同的样式表,并使用相同的标记来完全不同的外观和感觉.

有没有一个标志,我可以设置离开CSS在.css文件,其中属于IMO？

这是封装组件的整体.

组件应该具有封装的自己的样式,因此可以随风格一起运送.

想象一下,您想发布其他组件以供其他人使用,不应该有自己的风格吗？

这意味着Angular需要一种将这些CSS链接到组件的方法,从而将它们分离成块,并将它们注入到头标中.

为了解决你的问题,你有几个选择：

1-不使用模拟封装：

默认情况下,组件具有称为“封装”的属性,该属性设置为“仿真”,您需要将其更改为“无”：

@Component({
   encapsulation:ViewEncapsulation.None
})

然后,你可以把你所有的CSS放在你的头像你自己像一般的html页面.

2-如果问题是主题,您可以使您的组件成为主题.

您可以为您的组件提供一个主题属性,然后根据该属性更改样式：

@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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!