Angular 2:是相对于当前组件的styleUrl

Angular 2: is styleUrls relative to the current component?

本文关键字：组件 styleUrl 相对于 Angular      更新时间：2024-04-20

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

以下是我如何使用它：

路径/main.component.ts

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

path/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移到我的组件旁边

但我不能让它发挥作用。

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

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

  • mycomponent.ts
  • mycomponent.html
  • mycomponent.scss
相关文章：