styleUrls: ['./grid.page.scss'] breaks CSS Definitions

Ionic Framework
1

When building a project, CSS definitions change from:

.Definition {...}

to:

.Definition[_ngcontent-fxi-c134] {...}

And this breaks the Angular Framework I am trying to use. Is there a way to prevent this change?

2

Unfortunately I fear we’re focused a bit too deeply to start with. Can you back up a bit and provide:

  • enough code that can be dropped into a scratch project and run (or a stackblitz or something)
  • a description of what is supposed to be happening and how it differs from what you observe
3

Thank you for replying. This is a very general question. If I run

ionic generate page mypage

These files appear in a folder called mypage:

  • mypage-routing.module.ts
  • mypage.module.ts
  • mypage.page.html
  • mypage.page.scss
  • mypage.page.scss
  • mypage.page.spec.ts
  • mypage.page.ts

If I enter this style definition in mypage.page.scss

.card-title{
font-size:1em;
font-weight:bold;
}

When the project is built the definition changes to

.card-title [_ngcontent-wkd-c138] {
font-size: 1em;
font-weight: bold;
}

The framework I am trying to use does not recognize the new CSS definition, “.card-title [_ngcontent-wkd-c138]”. It is looking for “.card-title” without the appended brackets.

In general, is there a way to enter definitions in mypage.page.scss that will prevent the processor from generating the appended [_ngcontent-wkd-c138]" ?

Thanks again!

4

What framework? What does “recognize” mean in this context?

No, because that is how the styles that you define for a particular component are confined to that particular component.

I’m primarily puzzled because you as an app developer should not need to be getting this far down into the weeds of framework internals.

The direct answer to your specific question is probably that you can mess around with changing the ViewEncapsulation setting in each of your @Component directives, but there are likely to be some huge unwanted consequences of that, and I would instead urge you to resolve this problem on the end of whatever “framework” is having a problem with this situation, rather than on the Angular end.

5

Thanks very much. The answer is

There is no way to prevent the processor from amending style definitions with brackets.

I will add the CSS another way. Still, it seems like a simple flag that prevents the brackets would be useful.

Thanks again

6

Well, obviously it’s your decision, but what is going on here is IMHO a really good thing, and I would look for a way to work with it instead of circumvent it.

7

For others who have the same question, you can import your CSS into the “global.scss” The style definitions will remain unchanged.