使用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