Angular-cli: styles not working in app.component.ts @beta.11-webpack.2

[PiusNyakoojo]

Bug Report

styles and styleUrls not working in the default app.component.ts

Expected Behavior

• When 'styles' property is set in Component metadata, the application should be styled appropriately.

styles: ['body { background-color: red }'] // should make the application's background red

• When styleUrls is set using .css file name, the application should be styled appropriately.

styleUrls: ['app.component.css'] // should work

• Should work with .scss file as well. I used: ng set defaults.styleExt scss

styleUrls: ['app.component.scss']

Actual Behavior

The application isn't styled from app.component.ts.

Reproduction

• Create project

ng new project-name --prefix pn

• Add .scss support

ng set defaults.styleExt scss

• Add to app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'pn-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

export class AppComponent {   }

• Add to app.component.scss

@import './app.style'

body {
    background-color: $bg-color;
}

• Add to app.style.scss

$bg-color: red;

• serve

ng serve

Version details:

OS: Windows 10
node: 6.3.1
[email protected]

[cport1]

try adding this to your @Component({ ..., encapsulation: ViewEncapsulation.None })

[deebloo]

@PiusNyakoojo it looks like you are trying to style the body tag from inside a component. By default all angular styles are scoped to their component so that won't work.

[josepcrespo]

What @deebloo said should explicitly said in the official Angular.io tutorial, it saved my day!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}