CODEWITHSUNDEEP
cssangularsass
SveinS
SveinS

Reputation: 213

Angular using scss/sass and css in the same project

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?

Upvotes: 8

Views: 6437

Answers (5)

SveinS
SveinS

Reputation: 213

I found out that the best procedure was (Angular 5): Clone U'r repository first.

1. find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;
2. Vscode: find .css replace to .scss
3. npm install to make sure that .css files in the node_modules are not messed up.

And it worked without ANY errors.

GO!

Upvotes: 0

JMF
JMF

Reputation: 1113

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.

Upvotes: 2

Maks K
Maks K

Reputation: 3914

If you are using the latest version of angular-cli you should use this for changing css to sass

ng config schematics.@schematics/angular:component.styleext scss
  1. Is not recommendable, but this is possible.
  2. Yes and change it in components.
  3. They are similar. The main difference is in syntax. What's the difference between SCSS and Sass?
  4. You should have file for variables. And some folder for shared styles/mixins and other reusable things.

Upvotes: 1

Hyuck Kang
Hyuck Kang

Reputation: 1789

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.

Upvotes: 1

Sourangshu Sengupta
Sourangshu Sengupta

Reputation: 156

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

Upvotes: 5

Related Questions