css - 在 Angular 2/Angular-CLI 中将 CSS 排除在 JS 之外

Question

默认情况下，Angular 2 将 CSS 编译成 JavaScript，尤其是在 Angular-CLI 中使用 WebPack 时。出于几个原因，我宁愿这不会发生。

第一个原因是，当我进行开发时，我发现能够在开发人员工具中准确查看特定样式规则来自哪个样式表以及它所在的行号确实很有帮助。第二个原因是，我认为将 CSS 编译到代码中有点忽略了好的 CSS 的要点，即您可以应用不同的样式表并使用相同的标记获得完全不同的外观和感觉。

我可以在某处设置一个标志以将 CSS 保留在 .css 文件中，IMO 属于它吗？

Answer 1

这就是封装组件的意义所在。

一个组件应该有自己封装的样式，这样它就可以随样式一起提供。

假设您想发布您的一个组件供其他人使用，它不应该有自己的样式吗？

这意味着 Angular 需要一种方法将这些 css 链接到组件，从而将它们分成 block 并将它们注入(inject)到 head 标签中。

不过，要解决您的问题，您有两种选择:

1- 不使用模拟封装:

组件默认有一个名为 encapsulation 的属性设置为 Emulated ，您需要将其更改为 None :

@Component({
   encapsulation:ViewEncapsulation.None
})

然后，您可以将所有 css 放在自己的 head 标记中，就像您对普通 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