02 Global Styles - juanfevasquez/Ng-BasicStyling GitHub Wiki

Go to previous page

Managing your styles from global files.

On branch: demo/global-styles-in-angular

If you check the src folder you'll find the following structure:

IMAGE PENDING

Our app consists of our app component and a child component called card.

You'll see that the only css file available is found inside of the root folder (src). Inside of this css file I added all of the styles and they work globally, the same way than with any other regular web page.

The caveat

When launching our app, the styles.css file is not added to our html using the link tag as we would traditionally do. Instead, the style tag is injected in our head tag at runtime.

PASTE IMAGE HERE

Angular-cli configures webpack to use css loaders and style loaders that inject the styles. What webpack does is create a javascript module that exports all the content from style.css as a string. Then, using style loaders, this string is loaded inside a new style tag created at runtime.

As you might already know (if you don´t, it´s okay, we´re here to learn and share anyway), the css inside the style tag of the head, work globally, just like the styles you used to load from a good old link tag.

Continue to Component Scoped Styles