你能在Angular组件中使用styles和styleUrls吗？

Question

在我的Angular 2组件中，我使用styleUrls导入公共样式表，但不想为我想要添加特定于此组件的单个规则创建一个全新的样式表。 / p>

我还可以定义styles吗？因此，在我的组件中，我宣布styles和styleUrls，但它似乎无法正常工作。

只是想验证这是否可行。

Answer 1

AFAIK，无法同时使用style和styleUrls。 doc说，

  

有几种方法可以为组件添加样式：

     

  
• 设置styles 或 styleUrls元数据。
  

但是，对于您的问题，我在doc找到了一些有用的内容：

  

如果使用Webpack等模块捆绑包，也可以使用样式   属性在构建时从外部文件加载样式。你可以   写：

     

styles: [require('my.component.css')]

     

设置styles属性，而不是styleUrls属性。模块   bundler加载CSS字符串，而不是Angular。 Angular看到了CSS   只有在捆绑器加载后才能使用字符串。对于Angular，它就像你一样   手工编写样式数组。有关在此加载CSS的信息   方式，请参阅模块捆绑包的文档。

这样您就可以添加常用样式表和单个规则。例如：

styles: [require('his-common.component.css'), 'h1 { font-weight: normal; }'] 

Answer 2

如前所述，不可能将样式和样式表组合在一起。

如果你不想混淆你的样式表，你有一些可能性（从我的头脑开始）：

1. 将特定样式（尽可能少）放在另一个样式表中并执行

   styleUrls：[ “stylesheet1”， “stylesheet2”]

2. 使用require（'style-loader！./../../ assets / stylesheet.css'）根据需要在需要时通过类组件加载外部样式表。< / p>

3. 将公共元素样式移动到index.html旁边的styles.css和“free”styleURL或样式：针对特定样式。

可能还有其他一些解决方案，但这些应该是一个好的开始。

Answer 3

尽管在早期版本中不支持此功能，但从Angular 9开始仍然可以：

您可以指定多个样式文件，甚至可以组合 styles和styleUrls。

这里是最新doc的链接（如果您查看的是旧版本的文档，则省略了此注释）。