angular-cli: Component styles not working when defined styleUrls

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);

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 11
  • Comments: 18 (1 by maintainers)

Commits related to this issue

Most upvoted comments

I guess this isn’t important

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

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

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.

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.

.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’] })