Importing styles in angular.json vs importing in styles.css?

Question

What is the difference between importing styles in angular.json and importing in styles.css?

Importing in angular.json

Importing in styles.css

Hope to have explained my question well. Thanks in advance.

Answer 1

The styles array inside of the angular.json file is used to declare global styles for a project ( styles.css being one).

If you import all of your other stylesheets into styles.css (and styles.css is specified in the styles array in angular.json ), you'll end up with one global, composite stylesheet.

If you put all of your stylesheets into the angular.json styles array independently (rather than importing them into styles.css ), you'll end up with multiple global stylesheets.

Answer 2

In angular.json The styles.css file allows users to add global styles and supports CSS imports. You can add more global styles via the styles option inside your project's build target options in angular.json . These will be loaded exactly as if you had added them in a <link> tag inside index.html .

Importing css files in styles.css enable you divide your css code into separate files for the sake of organize code

for more information about global styles, follow this link