refactor(components): migrate component SCSS from @import to @use

wangdicoder · wangdicoder · commit 8e7dc515972b · 2026-03-09T09:55:38.000+11:00
Replace @import with @use ... as * across all ~90 component style files. Each component already explicitly imports its dependencies, so the modular @use system works as a drop-in replacement.
diff --git a/_template/style/_index.scss b/_template/style/_index.scss
@@ -1 +1 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
diff --git a/components/alert/style/_index.scss b/components/alert/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import './mixin';
+@use '../../style/variables' as *;
+@use './mixin' as *;
 
 .#{$prefix}-alert {
   border: 1px solid;
diff --git a/components/anchor/style/_index.scss b/components/anchor/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-anchor {
   margin: 0;
diff --git a/components/aspect-ratio/style/_index.scss b/components/aspect-ratio/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-aspect-ratio {
   box-sizing: border-box;
diff --git a/components/avatar/style/_index.scss b/components/avatar/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-avatar {
   box-sizing: border-box;
diff --git a/components/back-top/style/_index.scss b/components/back-top/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-back-top {
   position: fixed;
diff --git a/components/badge/style/_index.scss b/components/badge/style/_index.scss
@@ -1,6 +1,6 @@
-@import '../../style/variables';
-@import '../../style/animation';
-@import './mixin';
+@use '../../style/variables' as *;
+@use '../../style/animation' as *;
+@use './mixin' as *;
 
 .#{$prefix}-badge {
   position: relative;
diff --git a/components/badge/style/_mixin.scss b/components/badge/style/_mixin.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 @mixin badge-base {
   box-sizing: border-box;
diff --git a/components/breadcrumb/style/_index.scss b/components/breadcrumb/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-breadcrumb {
   &__ol {
diff --git a/components/button/style/_index.scss b/components/button/style/_index.scss
@@ -1,6 +1,6 @@
-@import '../../style/variables';
-@import '../../style/mixins';
-@import './mixin';
+@use '../../style/variables' as *;
+@use '../../style/mixins' as *;
+@use './mixin' as *;
 
 $btn-prefix: #{$prefix}-btn;
 
diff --git a/components/calendar/style/_index.scss b/components/calendar/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-calendar {
   background: var(--ty-calendar-bg, #fff);
diff --git a/components/card/style/_index.scss b/components/card/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import './mixin';
+@use '../../style/variables' as *;
+@use './mixin' as *;
 
 .#{$prefix}-card {
   box-sizing: border-box;
diff --git a/components/carousel/style/_index.scss b/components/carousel/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 $carousel-prefix: #{$prefix}-carousel;
 
diff --git a/components/cascader/style/_index.scss b/components/cascader/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-cascader {
   position: relative;
diff --git a/components/checkbox/style/_index.scss b/components/checkbox/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-checkbox {
   position: relative;
diff --git a/components/collapse/style/_index.scss b/components/collapse/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-collapse {
   box-sizing: border-box;
diff --git a/components/color-picker/style/_index.scss b/components/color-picker/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-color-picker {
   display: inline-block;
diff --git a/components/date-picker/style/_index.scss b/components/date-picker/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 $dp: #{$prefix}-date-picker;
 
diff --git a/components/descriptions/style/_index.scss b/components/descriptions/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-descriptions {
 
diff --git a/components/divider/style/_index.scss b/components/divider/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-divider {
   font-size: 16px;
diff --git a/components/drawer/style/_index.scss b/components/drawer/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-drawer {
   position: fixed;
diff --git a/components/dropdown/style/_index.scss b/components/dropdown/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-dropdown {
 
diff --git a/components/empty/style/_index.scss b/components/empty/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-empty {
   display: flex;
diff --git a/components/flip/style/_index.scss b/components/flip/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-flip {
   display: inline-block;
diff --git a/components/form/style/_index.scss b/components/form/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-form {
 
diff --git a/components/grid/style/_index.scss b/components/grid/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-row {
   box-sizing: border-box;
diff --git a/components/icon/style/_index.scss b/components/icon/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import '../../style/font';
+@use '../../style/variables' as *;
+@use '../../style/font' as *;
 
 .#{$prefix}-icon {
   font-family: 'tiny' !important;
diff --git a/components/image/style/_index.scss b/components/image/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-image {
   box-sizing: border-box;
diff --git a/components/input-number/style/_index.scss b/components/input-number/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import '../../input/style/mixin';
+@use '../../style/variables' as *;
+@use '../../input/style/mixin' as *;
 
 .#{$prefix}-input-number {
   position: relative;
diff --git a/components/input-password/style/_index.scss b/components/input-password/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-input-pwd {
   &__suffix {
diff --git a/components/input/style/_index.scss b/components/input/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import './mixin';
+@use '../../style/variables' as *;
+@use './mixin' as *;
 
 .#{$prefix}-input {
   position: relative;
diff --git a/components/input/style/_mixin.scss b/components/input/style/_mixin.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 // use for the `input` tag
 @mixin input-default {
diff --git a/components/keyboard/style/_index.scss b/components/keyboard/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-kbd {
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
diff --git a/components/layout/style/_index.scss b/components/layout/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-layout {
   box-sizing: border-box;
diff --git a/components/link/style/_index.scss b/components/link/style/_index.scss
@@ -1,4 +1,4 @@
-@import "../../style/variables";
+@use "../../style/variables" as *;
 
 .#{$prefix}-link {
   color: var(--ty-color-primary);
diff --git a/components/list/style/_index.scss b/components/list/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-list {
   color: var(--ty-color-text, #{$gray-800});
diff --git a/components/loader/style/_index.scss b/components/loader/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import '../../style/mixins';
+@use '../../style/variables' as *;
+@use '../../style/mixins' as *;
 
 .#{$prefix}-loader {
   font-family: $font-family;
diff --git a/components/loading-bar/style/_index.scss b/components/loading-bar/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-loading-bar {
   position: fixed;
diff --git a/components/menu/style/_index.scss b/components/menu/style/_index.scss
@@ -1,5 +1,5 @@
-@import "../../style/variables";
-@import "./mixin";
+@use "../../style/variables" as *;
+@use "./mixin" as *;
 
 .#{$prefix}-menu {
   display: flex;
diff --git a/components/message/style/_index.scss b/components/message/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import '../../style/animation';
+@use '../../style/variables' as *;
+@use '../../style/animation' as *;
 
 .#{$prefix}-message {
   position: relative;
diff --git a/components/modal/style/_index.scss b/components/modal/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-modal {
   position: relative;
diff --git a/components/native-select/style/_index.scss b/components/native-select/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import './mixin';
+@use '../../style/variables' as *;
+@use './mixin' as *;
 
 $select-arrow: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4gIDxwYXRoIGZpbGw9IiMzOTNFNDgiIGQ9Ik0wLjIyMiw1LjYxMyBMNS40NTEsMC4yMjMgQzUuNzU2MjEyMDksLTAuMDc0MzYzMjMzMyA2LjI0Mjc4NzkxLC0wLjA3NDM2MzIzMzMgNi41NDgsMC4yMjMgTDExLjc3OCw1LjYxMyBDMTIuMTgsNi4wMjcgMTIuMDI1LDYuNjY3IDExLjQwNyw2LjY2NyBMMC41OTIsNi42NjcgQy0wLjAyNCw2LjY2NyAtMC4xOCw2LjAyNyAwLjIyMiw1LjYxMyBaIE0wLjU5Miw5LjMzMyBMMTEuNDA3LDkuMzMzIEMxMi4wMjUsOS4zMzMgMTIuMTgsOS45NzMgMTEuNzc3LDEwLjM4NyBMNi41NDcsMTUuNzc3IEM2LjI0MTkxMjU4LDE2LjA3MzcxNDMgNS43NTYwODc0MiwxNi4wNzM3MTQzIDUuNDUxLDE1Ljc3NyBMMC4yMjIsMTAuMzg3IEMtMC4xOCw5Ljk3MyAtMC4wMjQsOS4zMzMgMC41OTIsOS4zMzMgWiIvPjwvc3ZnPg==';
 
diff --git a/components/notification/style/_index.scss b/components/notification/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-notification {
   position: relative;
diff --git a/components/overlay/style/_index.scss b/components/overlay/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-overlay {
   position: fixed;
diff --git a/components/pagination/style/_index.scss b/components/pagination/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-pagination {
   box-sizing: border-box;
diff --git a/components/pop-confirm/style/_index.scss b/components/pop-confirm/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-pop-confirm {
   color: var(--ty-color-text-secondary);
diff --git a/components/popover/style/_index.scss b/components/popover/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-popover {
 
diff --git a/components/popup/style/_index.scss b/components/popup/style/_index.scss
@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-popup {
   box-sizing: border-box;
diff --git a/components/progress/style/_index.scss b/components/progress/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-progress-bar {
   display: flex;
diff --git a/components/radio/style/_index.scss b/components/radio/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-radio {
   position: relative;
diff --git a/components/rate/style/_index.scss b/components/rate/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-rate {
   display: inline-flex;
diff --git a/components/result/style/_index.scss b/components/result/style/_index.scss
@@ -1,5 +1,5 @@
-@import '../../style/variables';
-@import '../../style/animation';
+@use '../../style/variables' as *;
+@use '../../style/animation' as *;
 
 .#{$prefix}-result {
   padding: 48px 32px;
diff --git a/components/scroll-indicator/style/_index.scss b/components/scroll-indicator/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-scroll-indicator {
   box-sizing: border-box;
diff --git a/components/segmented/style/_index.scss b/components/segmented/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-segmented {
   display: inline-flex;
diff --git a/components/select/style/_index.scss b/components/select/style/_index.scss
@@ -1,4 +1,4 @@
-@import "../../style/variables";
+@use "../../style/variables" as *;
 
 .#{$prefix}-select {
   position: relative;
diff --git a/components/skeleton/style/_index.scss b/components/skeleton/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-skeleton {
   display: inline-block;
diff --git a/components/slider/style/_index.scss b/components/slider/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-slider {
   position: relative;
diff --git a/components/space/style/_index.scss b/components/space/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-space {
   display: inline-flex;
diff --git a/components/split-button/style/_index.scss b/components/split-button/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-split-button {
 
diff --git a/components/split/style/_index.scss b/components/split/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-split {
   box-sizing: border-box;
diff --git a/components/statistic/style/_index.scss b/components/statistic/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-statistic {
   &__title {
diff --git a/components/steps/style/_index.scss b/components/steps/style/_index.scss
@@ -1,4 +1,4 @@
-@import '../../style/variables';
+@use '../../style/variables' as *;
 
 .#{$prefix}-steps {
   box-sizing: border-box;
diff --git a/components/sticky/style/_index.scss b/components/sticky/style/_index.scss
diff --git a/components/strength-indicator/style/_index.scss b/components/strength-indicator/style/_index.scss
diff --git a/components/switch/style/_index.scss b/components/switch/style/_index.scss
diff --git a/components/switch/style/_mixin.scss b/components/switch/style/_mixin.scss
diff --git a/components/table/style/_index.scss b/components/table/style/_index.scss
diff --git a/components/tabs/style/index.scss b/components/tabs/style/index.scss
diff --git a/components/tag/style/_index.scss b/components/tag/style/_index.scss
diff --git a/components/textarea/style/_index.scss b/components/textarea/style/_index.scss
diff --git a/components/time-picker/style/_index.scss b/components/time-picker/style/_index.scss
diff --git a/components/timeline/style/_index.scss b/components/timeline/style/_index.scss
diff --git a/components/tooltip/style/_index.scss b/components/tooltip/style/_index.scss
diff --git a/components/transfer/style/_index.scss b/components/transfer/style/_index.scss
diff --git a/components/transition/style/_index.scss b/components/transition/style/_index.scss
diff --git a/components/transition/style/_mixin.scss b/components/transition/style/_mixin.scss
diff --git a/components/tree/style/_index.scss b/components/tree/style/_index.scss
diff --git a/components/typography/style/_index.scss b/components/typography/style/_index.scss
diff --git a/components/upload/style/_index.scss b/components/upload/style/_index.scss

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-@import '../../style/variables';`
	`1`	`+@use '../../style/variables' as *;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '../../style/variables';`
	`1`	`+@use '../../style/variables' as *;`
`2`	`2`
`3`	`3`	`.#{$prefix}-anchor {`
`4`	`4`	`margin: 0;`