Create Common Styles File

Overview

In an Angular application using monorepo tooling such as NX, (where we have library architecture) the common styles file serves as a centralized location for managing global styles and dependencies.

This is what we will be doing for this code generation. I.e. creating a common-styles.scss file which will have all of our library scss files imported. We can then import this singular scss file into our application. We will also be including a standard normalize.scss file within our application.

The Value of a Centralized Common Styles Scss file

This allows us to build out our library styling logic in isolation. Anytime that we add a new style file to our library, we simply add it to the common-styles.scss file.

What is Normalize.css?

Normalize.css is a modern, HTML5-ready alternative to traditional CSS resets. It makes browsers render elements more consistently and in line with modern standards. By including Normalize.css in your Angular project, you can create a consistent baseline for styles across different browsers, reducing cross-browser inconsistencies.

Why Use Noramlize Scss?

Well, it's not something that is included by default by browsers. Nor is it something that is included by default with design languages. In addition, different browsers have different quirks. So, to make life easy, it makes a lot of sense to include it and include early so designs are built around this ground zero so to speak.