s.esmaeili/tehran_taj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin-panel: import ant-design-vue 4 reset.css (fixes unstyled page)

Browse Source 
The ADV4 upgrade dropped the old `ant-design-vue/dist/antd.less` import but
never added its replacement. ADV4 injects each COMPONENT's styles at runtime
via CSS-in-JS, but NOT the global baseline — that ships separately as
dist/reset.css and must be imported explicitly. Without it the page lost
box-sizing, the body margin reset and the browser default list/heading
resets, so the layout rendered unstyled.

Verified in a real headless browser this time, not just a green build:
reset.css now resolves through LESS and its rules are present in the built
CSS, the CSS-in-JS engine injects component styles (14 <style> tags on the
login page), and buttons/inputs/cards compute real ant metrics with dir=rtl.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
s.esmaeili
2026-09-14 17:22:46 +03:30
co-authored by Claude Opus 5
parent 0e1dd0c36a
commit acc41c21d9
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-panel/src/assets/styles/main.less
+17 -11
View File
@@ -1,21 +1,27 @@
// Style entry for admin-panel.
//
// ant-design-vue 4 removed its LESS theme entirely (CSS-in-JS design tokens
// replace modifyVars) — `ant-design-vue/dist/antd.less` no longer exists, so
// it is no longer imported here; ADV4's runtime styles are injected by the
// library itself. Primary/link/radius tokens now live in App.vue's
// <a-config-provider :theme>.
// replace modifyVars) — `ant-design-vue/dist/antd.less` no longer exists.
// Each COMPONENT's styles are injected at runtime by the library, but the
// global BASELINE is not: ADV4 ships it separately as dist/reset.css and
// requires you to import it yourself. It carries box-sizing, the body margin
// reset and — critically — the list-style reset the menu depends on. Without
// it the sidebar renders as raw <ul> bullets and the whole panel stacks
// vertically, so this import MUST come first.
// Primary/link/radius tokens live in App.vue's <a-config-provider :theme>.
//
// `ara/ant.less` (426 lines of hand-written RTL flips for float/margin/
// transform) is also gone: ADV4 renders RTL natively via CSS logical
// properties when direction="rtl" is set, which App.vue already does. The
// small residue ADV4 does not cover lives in ./rtl-overrides.css.
// transform) is gone: ADV4 renders RTL natively via CSS logical properties
// when direction="rtl" is set, which App.vue already does. The small residue
// ADV4 does not cover lives in ./rtl-overrides.css.
//
// Remaining order:
// 1. farsi.less -> font faces + global reset
// 2. rtl-overrides.css -> the few RTL rules ADV4 doesn't provide natively
// 3. utilities.less -> the global utility layer replacing legacy's Tailwind
// Order:
// 1. ant-design-vue reset -> the global baseline ADV4 no longer auto-injects
// 2. farsi.less -> font faces + global reset
// 3. rtl-overrides.css -> the few RTL rules ADV4 doesn't provide natively
// 4. utilities.less -> the global utility layer replacing legacy's Tailwind
// build. Must come last so its card chrome layers over ant's own styles.
@import 'ant-design-vue/dist/reset.css';
@import './farsi.less';
@import './rtl-overrides.css';
@import './utilities.less';