Angular using scss/sass and css in the same project

Question

I know it's possible to use both css and sass/scss in the same project. I've looked at a SO question where this was asked, but from what I saw there was a lot of warnings popping up when using css as styleExt in the angular_cli.json file.

1. Is it recommendable to do so?
2. Should I rename all .css files to sass/scss?
3. What is best scss/sass, my guess is scss?
4. Any recommended procedure for the change/conversion, just renaming or is it necessary?

Answer 1

If you see angular-cli.json, "styles": is an array. So it should allow us to add multiple style files as a comma-separated array. That should remove the warnings.

However, I think it is better to have similar styles across your application. If you want to convert all your files to scss/sass, you can do so in the following way:

1. Rename your css file to .scss/.sass. Eg: my-file.css to my-file.scss.
2. In each corresponding .component.ts file, update the styleUrls with .scss/.sass filename. Eg: styleUrls: ['my-file.css'] to styleUrls: ['my-file.scss']
3. Change the styles:[ "styles.css"], in angular-cli.json to styles:["styles.scss],, and that should do it!

You can learn more about sass/scss here: Sass Lang Guide

Answer 2

Rename your files from sass to scss. Scss is recognized worldwide, sass is simply a syntax of another language derived from css. The compilers recognize scss.

Use this command to change your project extensions

ng set defaults.styleExt=scss

Manually change .angular.json:

"styleExt": "scss"

You can also change extensions manually, nothing happens.

Answer 3

1. In local style case, it is not recommendable. Becasue it is too complex to handle both type for every components in angular. But for global style , defer load CSS or inline css, you can choose that as option.

For 2. 3. Use .scss if you already have some .css codes. Every .css code can be included in .scss files. For more details, please read this link.

4. There are good descriptions in Sourangshu's answer and https://angular.io/guide/component-styles#component-styles and the link in 1.