Angular Component Based CSS

Question

In Angular 4/5, is there a way that component based will be generated to a file instead of style tag.

@Component({
    templateUrl: 'login.component.html',
    styleUrls: ['../../assets/css/auth.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [AuthenticationService]
})

Only files under angular-cli.json styles were generated to a file.

"prefix": "app",
 "styles": [               
   "../src/assets/css/bootstrap.min.scss",
   "../src/assets/fonts/fontface.min.scss",                
   "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 
   "app/chronos/assets/css/main.scss"
 ]

Here is what I am using:

"@angular/compiler": "^5.0.1"
"@angular/compiler-cli": "^5.0.1"
"@angular/core": "^5.0.1"
"@angular/forms": "^5.0.1"

Tamadrumma · Accepted Answer · 2017-11-24 01:51:41Z

1

You'll need to remove the stylesheet from the styleUrls property in your component and either add it to the styles property in angular-cli.json or add it to a top-level css file referenced from your index html file.

answered Nov 24, 2017 at 1:51

Tamadrumma

112 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

asteriskdothmg Over a year ago

I don't want to make it global as it is only for that specific component.

Tamadrumma Over a year ago

Understood. In Angular 2/4, anything added to the styles property in .angular-cli.json will be compiled into the styles bundle and applied to your html elements inline. I'm not sure of any way to get around that if you are referring to the CSS from your component. Adding to a global CSS file is an alternative, you can also add to to a CSS file with selectors specific to your component but you'd still need to append it to your HTML through some means, and it would become tedious to use separate CSS files in this manner for each component.

Tamadrumma Over a year ago

You can also try to segregate the styles in a more global CSS by starting your selectors from the component's selector, something like 'my-login-component .xyz' in your example (if you were to specify a selector: 'my-login-component' property in your component's decorator.

asteriskdothmg Over a year ago

Yes I understand. Everytime I am running the application all the css specified in the components are generated in the index.html and placed under style tag. I am wondering how caching will take effect with this setup. As we all know, for the syle bundle, it will generate new hash everytime there is a changes with any of the files in the angular-cli. With this, problem with caching is not happening.

Tamadrumma Over a year ago

Right, as long the update to your index.html file is seen in the browser (not cached), the newly generated styles bundle, with new hash in the filename, should be retrieved. If you were to use a more global CSS file, you'd need to add some sort of cache-busting technique. There are many strategies to accomplish that. The can be found with a simple web search.

Collectives™ on Stack Overflow

Angular Component Based CSS

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related