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>
- Bump ant-design-vue 3.2.20 -> 4.2.6, @ant-design/icons-vue 6.1.0 -> 7.0.1.
- ADV4 removed LESS theming (modifyVars) for CSS-in-JS design tokens: drop
the vite.config.ts modifyVars block and the antd.less import; move the
three tokens ant actually consumed (primary/link/border-radius) to
App.vue's <a-config-provider :theme>.
- Delete src/assets/styles/ant.less (426 lines of hand-written RTL flips):
ADV4 renders RTL natively via CSS logical properties given direction="rtl",
which App.vue already sets. Preserve only the small residue ADV4 doesn't
cover natively (upload filename LTR, select dropdown z-index, tabs nav
direction) in a new rtl-overrides.css.
- Clean up the stale --primary/--accent token comment in utilities.less now
that ant.less is gone.
- Verified: pnpm build (vue-tsc -b && vite build) passes with zero errors;
the codebase already used v-model:open everywhere (no ADV3 visible prop
usage to migrate).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
