javascript - Angular 2 : is styleUrls relative to the current component?

Question

我在使用 styleUrls 向我的 angular 2 组件添加样式时遇到了一些麻烦。

下面是我的使用方法:

路径/main.component.ts

@Component({
    selector: 'app-view',
    styleUrls: ['./styles/style.css'],
    template: //...
})

路径/styles/style.css

.main-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: red; }

我的浏览器没有任何反应。 我试过:

• 绝对路径
• 相对于根组件的路径。

我也试过:

• 用不同的语法写这个，比如'./styles/style.css', 'styles/style.css'
• 将我的 style.css 移动到我的组件旁边。

但我无法让它工作。

Answer 1

不要使用 styleUrls。只需将样式文件重命名为 scss 扩展名即可。样式表将自动使用!

因此，我的组件的文件将是这样的，并将使用以下样式:

• 我的组件.ts
• 我的组件.html
• 我的组件.scss