1

Recently i saw a new angular project (v10) with a curious stucture. Owners said they decided to put all css component files into an asset folder like the example below:

+ src
   + app
      - app.component.ts
      - app.component.html
      - app.component.scss
      - app.module.ts
      - app.routing.ts
      + components
         + foo
            - foo.component.ts
            - foo.component.html
         + bar
            - bar.component.ts
            - bar.component.html 
   + assets
      + scss
         + components
            - foo.scss
            - bar.scss

I'm really curious about this because i always though that it was a bad idea to separate the css of the component in another file but i dont found any documentation or recommendations about this.

Is it a good practice to move the component's css file to assets ?

Leasye
  • 261
  • 1
  • 8
  • 19
  • Don't separate them. You lose view encapsulation (unless component references that scss) and good folder structure. Also, anything in assets will be published, so raw scss is available to users. – Bojan Kogoj Nov 11 '20 at 15:16
  • 1
    Leasye, it's indiferent put the .css in a file (you use `styleUrls`) or inside your component (you use `styles`). if you use styleUrls, nobody say you must put the .css file in the same folder than the component. But **never** put this css files in "assets" folder. Angular get the css files and create an unique file. If your files is in assets folder you're copying twice the .css. – Eliseo Nov 11 '20 at 15:59

0 Answers0