Best practice Angular and Sass file structure

Question

How would you structure the sass files in an Angular project?

As I see it there are 3 options.

---

1. Remove all sass files (and styling) from the component folders and have all files in a “normal” sass structure ie a styles folder.

styles
    ├── base
    ├── components
    └── xxxx

Pro:
- Alle styling files in the same folder.
- Easy and quick to build sass.

Con:
- Developers have to look for the correct files.
- File structure can become messier.

---

2. Keep the sass files in the component. Keep the normal sass structure on everything else. Styles folder would look the same as above but without the components styles. Have a file partial file for component to collect the components styles from the different project components.

Pro:
Components have their style files in their folder.
Easy and quick to build sass.
Easier to get a clean file structure.
Con:
Every time there is a new component the _components.scss file must be updated with a long file path.

---

3. Keeping the sass files in the components and let angular compile the sass.

Pro:
Components have their style files in their folder.
Easier to get a clean file structure.
Con:
Takes longer to build and test.
End up with at least two style files as we still need global styles etc.

---

What is the best practice here?

Sorry - had a hard time explaining this, but hope you are able to understand what the problem is :)

Irvingirwin

Answer 1

I too have searched about the same question you have asked and then came to a conclusion, to adopt somewhat hybrid of a structure with 2nd and 3rd as per your question.

So according to my research on the SASS structuring in an angular project for making the code as much as modular, you can keep the component-specific CSS in that component folder itself where you .html, .ts files reside.

But for reusable components (say avatar-block) which you may be using in various components, can have a separate partial file.

Below I'm attaching the screenshot of my SASS folder.

Similar to component and helper folders you can have layout folder also which will contain your layout specific SCSS partials. The rest of your SCSS can be included inside your angular component-specific SCSS file eg:- login.component.scss can contain SCSS for login component layout, borders, margin, positions, etc. according to your need.

PS- If you are looking for the best directory structure for Angular as well? Please check it out here.

Dewey

Answer 2

I do a mix of the second and the third approach you mentioned in the Question. This is my sass - or AKA style - folder:

Then I import them in the styles.scss

I like to keep my styles as global as possible avoiding component styling as I find that things can get very messy very quickly.

I reached out to this organization after a lot of restructuring.

Asbestosis

Answer 3

You should keep global files in root level of angular workspace so that you can share it across the applications in the angular workspace. This can be partial files that can be applicable throughout the application.

And also have component specific css/scss files respective component folder itself.

For example, login component can its localized style in its login.component.scss file.

Servitor

Answer 4

Here is the structure that I use:

Tricolor