shared-table-scss-refactor

To consolidate duplicated CSS into a shared SCSS partial, extract the overlapping rules from your Vue SFCs into a shared file, update the components with the correct @use path, and run a build to verify no styling regressions.

Separating shared table styles from per-component scoped styles requires defining a clear split: place common rules in a shared SCSS partial and keep per-tab specific overrides directly within the scoped style block of each HtmlTable.vue file.

You need to update an invoice-table.scss shared partial when you observe duplicated CSS across multiple *HtmlTable.vue files, add a utility class consumed by more than one table, or modify the existing shared styling rules.

The @use path contract establishes a structured workflow for migration by defining the exact import paths consumer SFCs must use to reference the shared partial, ensuring consistent styling and preventing broken imports during the refactor.

Yes, you can refactor shared table CSS without breaking sibling invoice tables by enforcing a strict split between shared partial rules and per-tab scoped styles, then running a build to verify that no visual regressions occur.