Angular-cli: Question: SASS in WebPack version

[vapits]

it's not a feature or a bug but it;s a question because based on opened issues and docs I'm not sure if i have understand correctly.

I upgraded my project to angular-cli@webpack version that already includes lots and lots of styling (SASS).
So until now the only thing that I had to change was the file name from .css to .sass and everything was there ready. But know I'm not sure how to proceed.

First of all all my styleUrls I change 'em to .sass otherwise Webpack was giving errors. But now there is almost no styling there (still some parts are styled thought.

What is the correct procedure for this with the webpack version?

UPDATE
It seems only :host elements are styled and not the childs.

[neilhem]

Have you set default extension to Sass via ng set defaults.styleExt sass?

[vapits]

Yes I did it.

I don't get errors but styling even for angular-material stuff that is already there is not working correctly.

@neilhem Also how I can add styles that are not components but overall styles? For example in my src forlder i have an assets/styles folder that includes several style file (sass also). Should I include the style barrel into my entry component?

UPDATE
It seems only :host elements are styled and not the childs.

[vapits]

If you want to use SASS you have to se encapsulation to none.
Also if you want to add global style set you style barrel to your app component.

For example:

@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: 'app.component.html',
  styleUrls: ['../assets/styles/index.sass']
})

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}