角度2:styleUrls是否相对于当前组件? [英] Angular 2: is styleUrls relative to the current component?

问题描述

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

I'm encounter some troubles to add style to my angular 2 component using styleUrls.

这是我的用法:

path/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; }

在我的浏览器中什么也没有发生.我已经尝试过:

And nothing happens in my browser. I've tried with :

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

我也尝试过:

• 以不同的语法(例如'./styles/style.css'，'styles/style.css'
编写)
• 将我的 style.css 移动到组件旁边.

• to write this with different syntaxes like './styles/style.css', 'styles/style.css'
• to move my style.css next to my component.

但是我无法使它起作用.

But I can't get it works.

推荐答案

请勿使用 styleUrls .只需使用 scss 扩展名重命名样式文件.样式表将自动使用！

Don't use styleUrls. Simply rename the style file with scss extension. The stylesheet will be used automatically!

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

Therefore, my component's files will be like this, and will work with the style:

• mycomponent.ts
• mycomponent.html
• mycomponent.scss

这篇关于角度2:styleUrls是否相对于当前组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！