css - 在angular4中导入样式表

Question

我正在尝试将我的元素从 angular JS 升级到 angular 4。我有在 angular JS 元素中使用过的样式表。

这是我的文件夹结构

我使用 Angular CLI 创建了组件。一切都很完美，但我不知道如何在 Angular 4 元素中使用我的样式。有人可以解释我如何在全局范围内使用我的风格吗？并且也仅在某些组件中？

Answer 1

您可以在 angular-cli.json 中添加您的样式:

"styles": [
  // Your styles go here
]

这是针对全局样式的。本地样式(对于某个组件)在相应的 CSS 文件中，该文件属于您的组件，例如foo.component.css。默认情况下，每个组件都有以下注释:

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css'],
})

因此，foo.component.css 包含组件 FooComponent 的 CSS。

看这里:

• Component Styles
• Global styles