Hi,
while upgrading from 9.1.1 and 9.2.3 to 9.3.1 we're experiencing a regression in the angular frontend regarding the order of style injections. It seems that previously the injection order was preserved / similar to the one declared in angular.json which is good because we want to override some variables and styles from the lepton-x theme. This is no longer possible because the style injector is always injecting the lepton styles after the ones provided by angular.
Production (9.1.1):
Local (9.3.1):
Question 1)
Do you know how I can load my style at the very bottom? Do I need to provide my own Style Load Factory / LPX_PRO_STYLE_TOKEN or LPX_LAYOUT_STYLE_FINAL or LPX_STYLE_FINAL?
Question 2) Is this something you're planning to fix? Because in the code I've seen this comment
const linkElem = this.createLinkElem(style, direction, resolve);
//TODO: find a better way for understand style laaded by angular json
const appStyles = document.querySelector(
'link[rel="stylesheet"][href*="styles"]'
);
Which leads me to think that this could be improved.
Kind Regards, Marc
2 Answer(s)
-
0
In ABP 9.3.x, the LeptonX theme and style injection mechanism for Angular was updated, and the order of style injection may no longer match the order in
angular.json. This can affect your ability to override LeptonX theme variables/styles with your own styles.To ensure your custom styles are loaded after the LeptonX theme, you should inject your override styles dynamically at runtime, or use higher CSS specificity or
!importantas a workaround. The current ABP LeptonX style loader does not provide a built-in configuration to guarantee your styles are injected last viaangular.jsonorder.You do not need to provide your own
LPX_PRO_STYLE_TOKEN,LPX_LAYOUT_STYLE_FINAL, orLPX_STYLE_FINALunless you want to fully customize the style loading process. The current loader does not expose a public API for reordering, but you can create a custom provider to control style injection order if necessary.The ABP team is aware of the limitation, as indicated by the
//TODOcomment in the code. However, there is no official fix or configuration for this in 9.3.x. You can follow the official LeptonX theme documentation and community article for best practices and updates:- To override LeptonX theme variables, add your custom CSS to
styles.scssand use CSS variables as shown below:
- To override LeptonX theme variables, add your custom CSS to
:root { --lpx-logo: url('/assets/images/logo.png'); --lpx-logo-icon: url('/assets/images/logo-icon.png'); --lpx-brand: #edae53; }If you need to guarantee order, inject your custom style sheet dynamically after the app starts, or use a workaround like importing your CSS at the end of the main style file.
This is a known area for improvement, and you can track updates or provide feedback via the official channels.
Sources:
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
-
0
Hi,
I didn't really get an answer for this topic before it was auto-closed. Could you have another look into this, or give me some feedback on what the right approach would be on providing global styling, that can override LeptonX Themes?
Kind Regards, Marc
