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

Question

在我的Angular 2组件中,我styleUrls用来导入一个通用样式表,但是不想为我想要添加特定于该组件的单个规则创建一个全新的样式表.

我还可以定义styles吗？所以在我的组件中,我正在声明两者styles,styleUrls但它似乎不起作用.

只是想验证这是否可行.

Answer 1

据我所知,这是不可能同时使用style和styleUrls在一起.该文档称,

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

• 通过设置styles 或 styleUrls元数据.

但是,对于您的问题,我在doc中发现了一些有用的东西:

如果使用Webpack之类的模块捆绑包,还可以使用styles属性在构建时从外部文件加载样式.你可以写:

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

设置styles属性,而不是styleUrls属性.模块捆绑器加载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')可以根据需要在需要时根据特定样式通过类组件加载外部样式表.

3. 将公共元素样式移动到index.html旁边的styles.css和"free"styleURL或样式:用于特定样式.

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