Angular CLI 和 StyleUrls
Angular CLI and StyleUrls
我还是 Angular 的新手,我注意到如果向组件提供 StyleUrls 属性,它们似乎不会自动集成到 styles.js 中,但前提是我将其导入我的主要样式文件。
其实我想,这不是必需的,现在我问自己我添加 StyleUrls 的目的是什么?!我是否遗漏了配置或设置中的某些内容?是因为我用的少吗?
非常感谢任何建议。
干杯,
汤姆
您可以将全局 less 文件添加到 angular-cli.json 文件中的样式部分:
"styles": [ "my-style.less",
"styles.css"]
并且在您的组件中您可以使用:
styleUrls: ['./component.less']
你可以创建一个这样的新应用,以防使用 less:
ng new your_project --style less
好的,所以我只是回答我自己以及现在和将来面临同样问题的所有其他初学者:
我的问题是误解了 Angular 中的样式行为。
假设我们有一个组件 app.component.ts
,带有一个选择器 app-root
和一个样式文件 app.component.css
(或更少或其他),它被添加到组件的 属性 styleUrls
。
现在,如果我将选择器 app-root
的样式添加到组件的样式 sheet 中,它 将不会 被识别。如果我将它添加到全局 styles.css
(或更少或其他),它 将 被识别。
结论
Angular 仅 识别样式文件中的样式选择器用于组件的子元素,但不用于组件的根元素本身(我仍然感到困惑)。
我还是 Angular 的新手,我注意到如果向组件提供 StyleUrls 属性,它们似乎不会自动集成到 styles.js 中,但前提是我将其导入我的主要样式文件。 其实我想,这不是必需的,现在我问自己我添加 StyleUrls 的目的是什么?!我是否遗漏了配置或设置中的某些内容?是因为我用的少吗?
非常感谢任何建议。
干杯, 汤姆
您可以将全局 less 文件添加到 angular-cli.json 文件中的样式部分:
"styles": [ "my-style.less",
"styles.css"]
并且在您的组件中您可以使用:
styleUrls: ['./component.less']
你可以创建一个这样的新应用,以防使用 less:
ng new your_project --style less
好的,所以我只是回答我自己以及现在和将来面临同样问题的所有其他初学者:
我的问题是误解了 Angular 中的样式行为。
假设我们有一个组件 app.component.ts
,带有一个选择器 app-root
和一个样式文件 app.component.css
(或更少或其他),它被添加到组件的 属性 styleUrls
。
现在,如果我将选择器 app-root
的样式添加到组件的样式 sheet 中,它 将不会 被识别。如果我将它添加到全局 styles.css
(或更少或其他),它 将 被识别。
结论
Angular 仅 识别样式文件中的样式选择器用于组件的子元素,但不用于组件的根元素本身(我仍然感到困惑)。