Topic on Skin talk:Chameleon

UPDATE2: I was able to fully resolve the issues using more specific CSS selectors to get around CSS prioritization diffs. It was relatively simple code, but painful to find it.

UPDATE: Looks like I can tweak the CSS in the Gadget to acheive the same result as the ingected CSS, so revising my question: Why do CSS rules have different impact when loaded by Gadget vs injection by egChameleonExternalStyleModules ? Assume it's a resourceloader issue? Read on for context ...

The following works for customizing layout and css, including the navbar and all other components:

$egChameleonLayoutFile= __DIR__ . '/step_layout.xml';

$egChameleonExternalStyleVariables = [
    'container-max-widths' => '(sm: 540px, md: 720px, lg: 960px, xl: 2560px)'
];

$egChameleonExternalStyleModules = [
__DIR__ . '/step_classic.css' => 'afterVariables'
];

1. Injection of modules doesn't work consistently for styling anything, especially when using SCSS (example, customizing the default _light.scss and injecting that does not work, even if using a subset of these variables).
2. Injecting CSS this way (NOT using any variables) totally works, even for the navbar
3. My attempts to use Gatget CSS works for all BUT the navbar components, even when using simple CSS as in #2
4. Still need to test using MediaWiki:Common.css, but that doesn't suit my needs (I want users to have a choice and set for themselves)
5. User:Username/skinname.css method is not an option, so I'm not testing this

Since the injection methods are unreliable and don't really work, I'm hoping that the skin devs or someone else can help me to understand how to get around these final barriers (navbar styling fail via Mediawiki CSS methods). I need three three theme Gadgets for this skin, otherwise, I will need to lock it down to a single theme using CSS injection as above.

Thanks in advance.