How to define loading order of external CSS with extension and site package

I have an own extension with a CSS link in HeaderAssets section of a fluid template to load an external CSS file. This works fine.

Now I want to overwrite some CSS details of the extension inside one site package w/o the use of !important feature but the proper order of loaded CSS files:

at first: extensions CSS files
at second: site package CSS files

How can I force TYPO3 v10 to load the CSS files (or extensions) in my wanted order?

Changing the order in "Include static (from extensions)" does not work.

Solution

Don't include the extensions typoscript via the backend but via the sitepackage by

<INCLUDE_TYPOSCRIPT

For every typoscript setup and constants file needed. So in the backend include only the typoscript for your sitepackage.

Then you can choose the order however you want.

I put the constants and typoscipt of each extension in an own subfolder of a folder Extensions. For example xxxx_sitepackage/Configuration/TypoScript/Extensions/News. 2 files: _Constants.typoscriptc (with the include_typoscript to the original constants file of news) and Setup.typoscript:

 <INCLUDE_TYPOSCRIPT: source="FILE:EXT:news/Configuration/TypoScript/setup.txt">

plugin.tx_news {
    settings {
       cssFile >
       #etc.

Then:

 <INCLUDE_TYPOSCRIPT: source="DIR:EXT:xxxx_sitepackage/Configuration/TypoScript/Extensions" extensions="typoscript">

Also almost every extension has a typoscript setting which includes the JS and CSS. You could also disable them and load them / bundle them with Gulp, Laravel Mix, whatever. So you get only 1 CSS and 1 JS file. Or you let TYPO3 do that.