Search code examples
cssangularsassz-indexangular12

Z-index contains # in CSS

I've recently updated from angular 10 to 12.

I use SCSS.

After updating I noticed my logo is behind the content and all my z-index values have # prepended to the values and I don't know the reason why nor can't find any good information on where this change originates from or what is the cause.

Nothing changed in my config files or build pipelines except src package.json updates for packages

I also use angular material as my UI components library and have bootstrap spacing module imported additionally

enter image description here

I know the CSS is invalid. (after build). It's valid in design time but after build in runtime it gets hashtag prepended for whatever reason.

This was NOT the case before updates

Here's the design time

enter image description here

Is this some new angular feature that I'm missing here. Can't find anything relevant in docs.

Is this tied to Ivy?

Edit:

I believe this could be tied to recent sass API changes moving from @import to @use statements. ng update command should (according to docs) update and refactor scss for me but that's not the case.

Once I'm done refactoring if it fixes the issue I'll post it as answer here

Solution

  • Update to the latest available version of Angular. I had the same issue with 12.0.1, after ng update (12.0.5) the issue was fixed.