refactor: 迁移 sass 模块语法

src/components/cart-drawer/index.vue

@@ -112,5 +112,5 @@ const emit = defineEmits<{
 </script>
 
 <style lang="scss">
-@import './styles/index.scss';
+@use './styles/index.scss';
 </style>

src/components/cart-drawer/styles/base.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .cart-drawer {
   position: fixed;

src/components/cart-drawer/styles/empty.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .cart-drawer__empty {
   display: flex;

src/components/cart-drawer/styles/footer.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .cart-drawer__footer {
   flex-shrink: 0;

src/components/cart-drawer/styles/index.scss

@@ -1,4 +1,4 @@
-@import './base.scss';
-@import './list.scss';
-@import './footer.scss';
-@import './empty.scss';
+@forward './base.scss';
+@forward './list.scss';
+@forward './footer.scss';
+@forward './empty.scss';

src/components/cart-drawer/styles/list.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .cart-drawer__list {
   padding: 0 20px;

src/components/page-hero/index.vue

@@ -26,5 +26,5 @@ const { hasExtra } = usePageHero()
 </script>
 
 <style lang="scss">
-@import './styles.scss';
+@use './styles.scss';
 </style>

src/components/product-card/index.vue

@@ -62,5 +62,5 @@ const { tagClass } = useProductCard(props)
 </script>
 
 <style lang="scss">
-@import './styles.scss';
+@use './styles.scss';
 </style>

src/components/product-card/styles.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables';
+@use '../../styles/variables' as *;
 
 .product-card {
   background: $card;

src/components/scene-switcher/index.vue

@@ -42,5 +42,5 @@ const { handleSelect } = useSceneSwitcher(emit)
 </script>
 
 <style lang="scss">
-@import './styles.scss';
+@use './styles.scss';
 </style>

src/components/spec-popup/index.vue

@@ -149,5 +149,5 @@ const { tagClass } = useSpecPopup()
 </script>
 
 <style lang="scss">
-@import './styles/index.scss';
+@use './styles/index.scss';
 </style>

src/components/spec-popup/styles/base.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .spec-popup {
   position: fixed;

src/components/spec-popup/styles/footer.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .spec-popup__footer {
   padding: 14px 20px;

src/components/spec-popup/styles/header.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .spec-popup__header {
   display: flex;

src/components/spec-popup/styles/index.scss

@@ -1,5 +1,5 @@
-@import './base.scss';
-@import './header.scss';
-@import './options.scss';
-@import './stepper.scss';
-@import './footer.scss';
+@forward './base.scss';
+@forward './header.scss';
+@forward './options.scss';
+@forward './stepper.scss';
+@forward './footer.scss';

src/components/spec-popup/styles/options.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .spec-popup__group {
   padding: 16px 20px;

src/components/spec-popup/styles/stepper.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .spec-popup__stepper-row {
   display: flex;