Win a copy of Bad Programming Practices 101 (e-book) this week in the Beginning Java forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Angular 2 Development with TypeScript: Where to put CSS  RSS feed

 
Ranch Hand
Posts: 90
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The angular-cli command ng init creates a basic Angular 2 app. One of the files that it creates is src/styles.css, and this is referenced in the angular-cli.json file.

When you follow the guides for adding Angular Material, in particular, the guide for Theming your Angular Material app, they show how to create a new SCSS (Sass CSS) file to define a custom theme, and add a reference to the new file in angular-cli.json.

Then there are styleUrls, which from what I understand are CSS files for styling a particular component.

What is the intended role of these three, different places to put CSS? When should I place CSS in component CSS (via styleUrls) or "global" stylesheets such as src/styles.css and the SCSS theme file?
 
Author
Greenhorn
Posts: 25
5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
In angular-cli.json you put global styles (you app's or from the third-party libraries). CSS of the components should be either inlined or placed in the css file right in the directory where the component is located.
 
Daniel Trebbien
Ranch Hand
Posts: 90
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are there advantages to placing CSS to style components in component CSS?
 
Yakov Fain
Author
Greenhorn
Posts: 25
5
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Keeping the CSS, HTML, .ts, and test files in the same directory simplifies component's reusability.  If a component is needed in another app, just copy the content of the entire folder into another project. No need to go places and look for CSS that's required for this component.
 
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you are using a third party library, e.g. PrimeNG component library in that situation put CSS in Style.css

/* You can add global styles to this file, and also import other style files */
/*@import url('../node_modules/primeng/resources/themes/omega/theme.css');*/
@import url('../node_modules/primeng/resources/primeng.min.css');
@import url('../node_modules/font-awesome/css/font-awesome.min.css');
@import url('../node_modules/primeng/resources/themes/lightness/theme.css');

All the component CSS should be in the same directory as mentioned by Yakov.

Please correct me if better solution exists for third party library css.
 
When you have exhausted all possibilities, remember this: you haven't - Edison. Tiny ad:
Why should you try IntelliJ IDEA ?
https://coderanch.com/wiki/696337/IntelliJ-IDEA
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!