refactor: 迁移 sass 模块语法

AGENTS.md

@@ -35,7 +35,7 @@
 - 静态样式禁止直接写在模板的 `style=""` 上；改成语义类名并落到 `scss` 文件。
 
 ## Vue 文件拆分规范
-- 页面入口固定为 `src/pages/**/index.vue`，只保留模板、薄胶水脚本和 `@import './styles/index.scss'`；业务加载、计算、提交流程统一下沉到 `composables/useXxxPage.ts`。
+- 页面入口固定为 `src/pages/**/index.vue`，只保留模板、薄胶水脚本和 `@use './styles/index.scss'`；业务加载、计算、提交流程统一下沉到 `composables/useXxxPage.ts`。
 - 复杂页面必须继续二级拆分到 `src/pages/**/composables/<page-key>/`，至少按 `helpers.ts`、`*actions.ts`、`constants.ts` 这类职责拆开，不要把大段流程重新塞回 `useXxxPage.ts`。
 - 页面样式固定放在 `src/pages/**/styles/`，`styles/index.scss` 只负责聚合；当样式超过 150 行或已经出现多个视觉域时，必须拆成 `base.scss`、`card.scss`、`submit.scss` 这类分片。
 - 根组件固定使用目录入口：`src/components/<kebab-name>/index.vue`，并通过 `@/components/<kebab-name>/index.vue` 引用，不再新增平铺的 `src/components/*.vue`。

src/app.scss

@@ -1,5 +1,4 @@
-@import '@nutui/nutui-taro/dist/style.css';
-@import './styles/variables';
+@use './styles/variables' as *;
 
 page {
   min-height: 100%;

src/app.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import '@nutui/nutui-taro/dist/style.css'
 import './app.scss'
 import { setRequestHeaderProvider } from '@/services'
 import { pinia, useAppStore, useCustomerStore } from '@/stores'

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;

src/pages/address/index.vue

@@ -37,6 +37,6 @@ const {
 </script>
 
 <style lang="scss">
-@import './styles/index.scss';
+@use './styles/index.scss';
 </style>
 

src/pages/dinein/confirm/index.vue

@@ -21,6 +21,6 @@ const { handleInput, handleSave, tableNo } = useDineInConfirmPage()
 </script>
 
 <style lang="scss">
-@import './styles/index.scss';
+@use './styles/index.scss';
 </style>
 

src/pages/home/index.vue

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

src/pages/home/styles/base.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .home-page {
   min-height: 100vh;

src/pages/home/styles/category.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .home-page__categories {
   display: grid;

src/pages/home/styles/fab.scss

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

src/pages/home/styles/index.scss

@@ -1,5 +1,5 @@
-@import './base.scss';
-@import './banner.scss';
-@import './category.scss';
-@import './trust.scss';
-@import './fab.scss';
+@forward './base.scss';
+@forward './banner.scss';
+@forward './category.scss';
+@forward './trust.scss';
+@forward './fab.scss';

src/pages/home/styles/trust.scss

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

src/pages/menu/index.vue

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

src/pages/menu/styles/base.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .menu-page {
   min-height: 100vh;

src/pages/menu/styles/cart.scss

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

src/pages/menu/styles/index.scss

@@ -1,3 +1,3 @@
-@import './base.scss';
-@import './sections.scss';
-@import './cart.scss';
+@forward './base.scss';
+@forward './sections.scss';
+@forward './cart.scss';

src/pages/menu/styles/sections.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables';
+@use '../../../styles/variables' as *;
 
 .menu-page__section {
   margin-top: 4px;

src/pages/order/detail/index.vue

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

src/pages/order/detail/styles/base.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 .od-page {
   min-height: 100vh;

src/pages/order/detail/styles/bottom.scss

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

src/pages/order/detail/styles/goods.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 .od-page__goods-section {
   padding: 18px 20px;

src/pages/order/detail/styles/index.scss

@@ -1,4 +1,4 @@
-@import './base.scss';
-@import './timeline.scss';
-@import './goods.scss';
-@import './bottom.scss';
+@forward './base.scss';
+@forward './timeline.scss';
+@forward './goods.scss';
+@forward './bottom.scss';

src/pages/order/detail/styles/timeline.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 .od-page__timeline-section,
 .od-page__info-section {

src/pages/orders/index.vue

@@ -83,6 +83,6 @@ const {
 </script>
 
 <style lang="scss">
-@import './styles/index.scss';
+@use './styles/index.scss';
 </style>
 

src/pages/profile/index.vue

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

src/pages/store/select/index.vue

@@ -56,5 +56,5 @@ const { appStore, filteredStores, handleInput, keyword, selectStore } = useStore
 </script>
 
 <style lang="scss">
-@import './styles/index.scss';
+@use './styles/index.scss';
 </style>

src/pages/trade/checkout/index.vue

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

src/pages/trade/checkout/styles/base.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 .checkout-page {
   min-height: 100vh;

src/pages/trade/checkout/styles/cards.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 .checkout-page__dash-divider {
   height: 3px;

src/pages/trade/checkout/styles/fees.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/variables';
+@use '../../../../styles/variables' as *;
 
 .checkout-page__fees {
   padding: 14px 18px;

src/pages/trade/checkout/styles/index.scss

@@ -1,4 +1,4 @@
-@import './base.scss';
-@import './cards.scss';
-@import './fees.scss';
-@import './submit.scss';
+@forward './base.scss';
+@forward './cards.scss';
+@forward './fees.scss';
+@forward './submit.scss';

src/pages/trade/checkout/styles/submit.scss

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

src/pages/trade/success/index.vue

@@ -24,6 +24,6 @@ const { goMenu, goOrderDetail, goOrders, orderNo } = useTradeSuccessPage()
 </script>
 
 <style lang="scss">
-@import './styles/index.scss';
+@use './styles/index.scss';
 </style>
 

src/styles/_mixins.scss

@@ -1,4 +1,5 @@
-@import './variables';
+@use 'sass:math';
+@use './variables' as *;
 
 @mixin card($radius: $r-lg) {
   background: $card;
@@ -10,7 +11,7 @@
 @mixin green-gradient-btn($height: 48px) {
   height: $height;
   border: none;
-  border-radius: $height / 2;
+  border-radius: math.div($height, 2);
   font-weight: 700;
   color: #fff;
   background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);