Use Ionic CSS variables in custom components stylesheet

Hi,

In our Ionic Vue app we added some custom components, which have their own styles. For consistency, we want to use the same colors as the standard Ionic components.

Our stylesheets are structured this way:

• variables.css => Standard Ionic CSS variables file, untouched since project creation.
• custom.css => CSS styles for our custom components.

For example, if I add this to custom.css:

.my-component  {
  color: var(--ion-text-color);
  background-color: var(--ion-card-background);
}

and then in main.ts:

// ...

import "./theme/variables.css";
import "./theme/custom.css";

// ...

The styles are not applied.
For example, checking the background-color from Chrome DevTools, I see that the style (correctly) is background-color: var(--ion-card-background);, but see the message --ion-card-background is not defined when hovering the variable name in the “Styles” tab of the DevTools.

Is there any way to use these CSS variables in custom CSS stylesheets?

Thanks in advance!

1 post - 1 participant

Read full topic