bug: After upgrade to Ionic v8 my variables.css are being overwritten by the default values in the core.css file. about ionic-framework

[sean-perkins]

Hello @VerburgtJimmy if you could provide a minimal reproduction with the same base stylesheets you have described, that would help the team diagnose more.

In v8, we updated the selectors and default variable definitions and recommended that developers move their custom variables stylesheet to be imported/referenced after the primary global styles that import Ionic's global stylesheets.

You have done that with the example snippets you provided, however I would callout a few things:

1. You are importing the variables stylesheet twice in your angular.json.
2. You either need to add the stylesheet references for Ionic's global styles in angular.json or import it with a CSS import in a global stylesheet. You do not need to do both, which you are showing in the code snippets provided.

If you can provide more information or a minimal reproduction of variables not being customizable, the team would be happy to assist further.

Thanks!

[VerburgtJimmy]

Thanks for the response.

1. they are both different files. One is scss and one is css. But the css one is empty. I can remove it just to be sure, but this changes nothing in the app.
2. What is recommended to do with the global styles? Should I remove them from the global.css or from angular.js. Or doesn't this really matter?

If you can give me some time I will create a new ionic project where I will copy my own config files in there and of course my own css files to see if it also happens in a new project. If this is the case I will drop the link for the public repo here so you can reproduce the issue I am having.

[sean-perkins]

Either approach for global styles is an acceptable pattern in Angular and with Angular libraries, like Ionic Framework. They both result in similar outcomes, however the angular.json enables developers additional customization techniques for bundling: https://angular.io/guide/workspace-config#styles-and-scripts-configuration

Here are two reproduction templates that you can review and experiment with:

1. Using CSS imports: https://stackblitz.com/edit/angular-dawl1f?file=src%2Ftheme%2Fvariables.css
2. Use angular.json: https://stackblitz.com/edit/angular-dawl1f-vwkffm?file=angular.json

In both examples the customized primary colors from your provided snippet are applied correctly.

[kensodemann]

Sean already gave you some good examples to go by, but I will just add a few notes here, kind of a free code review based on some things I have noted working with our Enterprise customers as well as maintaining our demos.

1. Having a src/theme/variables.scss and src/theme/variables.css file is going to cause confusion for other developers on your team or for future you. Since you say the src/theme/variables.css file is empty, I suggest just removing it.
2. According to the rules of CSS, when all else is equal the last thing specified wins. In your case, you have src/theme/variables.scss specified first in your angular.json, which means anything specified there that is specified in a later file with the same selector will get the value in the later file.
3. having the Ionic supplied SCSS files specified in the global.scss and then also in the styles array of the angular.json is not only redundant, but makes the final output even harder to reason about.

My suggestions:

1. reduce your styles specified in the angular.json to the variables and the globals files like this: https://github.com/ionic-enterprise/tutorials-and-demos-ng/blob/main/demos/tea-taster/angular.json#L33
2. make sure the variables file is last in the list as it is overriding things brought in from the globals file
3. keep your global files mostly as-is, but perhaps add the appropriate dark theme handling CSS https://github.com/ionic-enterprise/tutorials-and-demos-ng/blob/main/demos/tea-taster/src/global.scss#L28

More on dark mode here: https://ionicframework.com/docs/theming/dark-mode

The other thing I always find helpful for stuff like this is to generate a new app from one of the starters and study the appropriate files.

[thetaPC]

Just wanted to follow up on the issue. Some suggestions were shared to help address the problem. Since there hasn't been a response, I'm assuming everything's sorted out.

Feel free to reopen this if needed or start a new one if anything else comes up.

[VerburgtJimmy]

Yes sorry. The following fixed my issue. My angular.json imported my files like this:

"styles": [
              {
                "input": "src/theme/variables.scss",
                "inject": true
              },
              {
                "input": "src/global.scss",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/normalize.css",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/structure.css",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/typography.css",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/core.css",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/padding.css",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/float-elements.css",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/text-alignment.css",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/text-transformation.css",
                "inject": true
              },
              {
                "input": "node_modules/@ionic/angular/css/flex-utils.css",
                "inject": true
              },
              {
                "input": "src/theme/variables.css",
                "inject": true
              }
            ],

Changing this to the following fixed my issue:

"styles": [
     "src/global.scss".
     "src/theme/variables.scss"
]