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
- fix(@ngtools/webpack): replace resources should effect only class decorators (#12503) At the moment we are processing all property assignments in object literals irrespective if they are in a decorat... — committed to angular/angular-cli by alan-agius4 6 years ago
- fix(@ngtools/webpack): replace resources should effect only class decorators (#12503) At the moment we are processing all property assignments in object literals irrespective if they are in a decorat... — committed to ikjelle/angular-cli by alan-agius4 6 years ago
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’] })