Angular CLI和StyleUrls

Question

我还是Angular的新手并注意到，如果将StyleUrls属性提供给它们似乎没有自动集成在styles.js中的组件，但只有在我将其导入到我的主样式文件中时才会这样。 实际上我想，这不是必要的，现在我问自己我为什么添加了StyleUrls？！我是否遗漏了配置或设置中的内容？是因为我使用LESS吗？

非常感谢任何建议。

干杯， 汤姆

Answer 1

好的，所以我只是回答自己以及现在和将来面临同样问题的所有其他初学者：

我的问题是误解了Angular中的样式行为。

假设我们有一个组件app.component.ts，其中包含一个选择器app-root和一个样式文件app.component.css（或更少或其他），它将添加到组件的属性styleUrls中。 现在，如果我将选择器app-root的样式添加到组件的样式表中，则将不会被识别。如果我将其添加到全局styles.css（或更少或其他），则将被识别。

结论

Angular only 识别组件的样式文件中的样式选择器 ，但不识别组件的根元素本身（我仍然感到困惑）。

Answer 2

你可以在angular-cli.json文件中将全局较少的文件添加到样式部分：

"styles": [ "my-style.less", 
             "styles.css"]

在您的组件中，您可以使用：

styleUrls: ['./component.less'] 

如果使用较少的话，你可以像这样创建一个新的应用程序：

ng new your_project --style less