Telling Angular to serve `styles.css` instead of `styles.scss`

Issue

In this web container stackblitz demo if we click on the rendered button element in Chrome Developer tooling we can see the generated styles.css.

Here is a screenshot.

When I try to do the same thing in an Angular CLI project, Angular will serve the styles.scss file, instead of styles.css.

This is a screenshot.

Is there a way to tell Angular to serve styles.css instead of styles.scss when working with local CLI based projects?

Solution

Edge

When you open up styles.scss by clicking on it in the styles tab of your devtools in Edge, you can just select the format you want in the tabs above the stylesheet it presents to you. I you can't see it you can click the >> arrows to show the option in a dropdown.

However, you will only see the global styles there. Not the component styling.

Click on the styles.scss on the right:

Select whatever presentation you prefer in the tabs:

Chrome

Go to devtools settings and disable CSS sourcemaps. (Second column, next to last check mark.)

Now you will see styles.css only in the right of your styles tab.

Answered By - H3AR7B3A7