Angular-cli: Component styles not working when defined styleUrls

[matikrk]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2

Repro steps.

When component have styles and styleUrls properties only working styleUrls. After building angularCli (webpack) generate 2 properties styles (1st from styles, 2nd from styleUrls). 2nd property overwrite 1st one.

code:

@Component({
  selector: 'app-smth',
  template: '<div><h1>yo yo</h1></div>',
  styles: ['h1{color:red;}'],
  styleUrls: ['./style.less']
})

after compile:

AccordionComponent = __decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_3" /* Component */])({
        selector: 'app-smth',
        template: "<div><h1>yo yo</h1></div>",
        styles: ['h1{color:red;}'],
        styles: [__webpack_require__(137)]
    }),
    __metadata("design:paramtypes", [])
], AccordionComponent);

Desired functionality.

When styles and styleUrls are defined should be merged to one array in bundle. Compiled file should look:

AccordionComponent = __decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_3" /* Component */])({
        selector: 'app-smth',
        template: "<div><h1>yo yo</h1></div>",
        styles: ['h1{color:red;}', __webpack_require__(137)]
    }),
    __metadata("design:paramtypes", [])
], AccordionComponent);

[deebloo]

@matikrk seems like a bug. Thanks for reporting!

[Sathishchary]

I am also facing the same issue in components. please provide some solutions.

[cuzox]

I guess this isn't important

[tbadlov]

Yeah this pretty annoying. It's hard to pitch the Angular when the functionality posted is not working.
@Sathishchary - my workaround is to put it the main CSS style file and make it as specific as possible. I don't like it but it works.

[Enrika]

Thanks for the suggestion. I can at least stop beating my head against the wall.

[gobinatarajan]

.css changes is not applying ..... styleUrls is bringing previous styles not updated one...question where it is pulling this previous styles ??.

@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})

[lenichols]

Having the same issue... scss works fine but css files wont render. :-(

[joelr2m]

Having same trouble here. Seems like its a kinda of fundamental thing to have working. I can see it being rendered but not applied no matter how much i try. Putting mine in a global css file instead,

[zamsonj]

You can fix the issue by writing:
styles: [require('mycomponent.component.css'), 'h1 { font-weight: normal; }']

[bravotango]

@zamsonj Thanks. Worked for me

[raulrene]

See this answer here on a related issue. That worked for me, using encapsulation: ViewEncapsulation.None in the @Component definition.

[russcarver]

ViewEncapsultion.None worked for my component. It does not appear needed for a main level page though (Ionic 4 Angular 6).

[jfuentesve]

require doesn't work for me with "Cannot find name 'require'.". Will have to go with global css file :(

[russcarver]

I have global components SASS files too and when I'm outside of /app I have to import them for some reason...

[umutesen]

The problem is declaring the styleUrls on the parent component and due to encapsulation they are not available in the child component. Just need to make the view encapsulation none on the parent component.

encapsulation: ViewEncapsulation.None

[StudioSpindle]

Setting the encapsulation to 'none' makes the styles global. That seems like a high price to pay and will not work for a library with encapsulated components.

[JarLowrey]

Can the parent styles be passed to the child, like in React?

[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._}