node-sass写法升级到sass写法

0dbf439f · 李晖 · 9a4aaa0b · 0dbf439f · 0dbf439f · 0dbf439f
Commit 0dbf439f authored Jul 15, 2025 by 李晖
209 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 /.idea/*
 deploy.sh
 .hbuilderx/
+/package-lock.json
--- a/App.vue
+++ b/App.vue
@@ -18,6 +18,6 @@
 </script>

 <style lang="scss">
-	@import "uview-ui/index.scss";
-	@import "common/demo.scss";
+	@use "uview-ui/index.scss" as *;
+	@use "common/demo.scss" as *;
 </style>
--- a/README.md
+++ b/README.md
@@ -92,14 +92,14 @@ Vue.use(uView);
 ```css
 /* App.vue */
 <style lang="scss">
-@import "uview-ui/index.scss";
+@use "uview-ui/index.scss" as *;
 </style>
 ```

 3. `uni.scss`引入全局scss变量文件
 ```css
 /* uni.scss */
-@import "uview-ui/theme.scss";
+@use "uview-ui/theme.scss" as *;
 ```

 4. `pages.json`配置easycom规则(按需引入)

--- a/common/demo.scss
+++ b/common/demo.scss
+@use "@/uview-ui/theme.scss" as *;
+
 /* #ifndef APP-NVUE */
 view,
 text {

--- a/components/page-nav/page-nav.vue
+++ b/components/page-nav/page-nav.vue
@@ -50,7 +50,7 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .nav-wrap {
 	padding: 15px;
 	position: relative;

--- a/manifest.json
+++ b/manifest.json
@@ -5,6 +5,12 @@
    "versionName" : "1.8.8",
    "versionCode" : "100",
    "transformPx" : false,
+	"sass": {
+	    "prependData": "@use '@/uview-ui/libs/css/theme.scss' as *;",
+	    "sassOptions": {
+	      "includePaths": ["node_modules"]
+	    }
+	  },
    "app-plus" : {
        // APP-VUE分包，可提APP升启动速度，2.7.12开始支持，兼容微信小程序分包方案，默认关闭
        "optimization" : {

--- a/package-lock.json
+++ b/package-lock.json
-{
-  "name": "uView",
-  "version": "1.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "vue-i18n": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.20.0.tgz",
-      "integrity": "sha512-ZiAOoeR4d/JtKpbjipx3I80ey7cYG1ki5gQ7HwzWm4YFio9brA15BEYHjalEoBaEfzF5OBEZP+Y2MvAaWnyXXg=="
-    }
-  }
-}
--- a/pages/componentsA/avatar/index.vue
+++ b/pages/componentsA/avatar/index.vue
@@ -85,6 +85,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;@use "@/uview-ui/theme.scss" as *;

 </style>
--- a/pages/componentsA/avatarCropper/index.vue
+++ b/pages/componentsA/avatarCropper/index.vue
@@ -92,7 +92,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/componentsA/backTop/index.vue
+++ b/pages/componentsA/backTop/index.vue
@@ -98,7 +98,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {
 		height: 200vh;
 	}

--- a/pages/componentsA/calendar/index.vue
+++ b/pages/componentsA/calendar/index.vue
@@ -104,7 +104,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {

 	}

--- a/pages/componentsA/empty/index.vue
+++ b/pages/componentsA/empty/index.vue
@@ -101,7 +101,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo-area {
 		height: 160px;
 		display: flex;

--- a/pages/componentsA/field/index.vue
+++ b/pages/componentsA/field/index.vue
@@ -96,7 +96,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {

 	}

--- a/pages/componentsA/form/index.vue
+++ b/pages/componentsA/form/index.vue
@@ -437,6 +437,7 @@ export default {
 </script>

 <style scoped lang="scss">
+	@use "@/uview-ui/theme.scss" as *;
 .wrap {
 	padding: 30rpx;
 }

--- a/pages/componentsA/fullScreen/index.vue
+++ b/pages/componentsA/fullScreen/index.vue
@@ -44,6 +44,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsA/icon/index.vue
+++ b/pages/componentsA/icon/index.vue
@@ -621,6 +621,7 @@
 </script>

 <style scoped lang="scss">
+	@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/componentsA/indexList/index.vue
+++ b/pages/componentsA/indexList/index.vue
@@ -28,7 +28,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.list-cell {
 		display: flex;
 		box-sizing: border-box;

--- a/pages/componentsA/keyboard/index.vue
+++ b/pages/componentsA/keyboard/index.vue
@@ -91,7 +91,8 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
+@use "@/uview-ui/theme.scss" as *;
 	.input {
 		border: 1px solid $u-light-color;
 		border-radius: 4px;

--- a/pages/componentsA/lazyLoad/index.vue
+++ b/pages/componentsA/lazyLoad/index.vue
@@ -230,7 +230,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 30rpx;
 		display: block;

--- a/pages/componentsA/modal/index.vue
+++ b/pages/componentsA/modal/index.vue
@@ -84,6 +84,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.logo {
 		height: auto;
 		will-change: transform;

--- a/pages/componentsA/navbar/index.vue
+++ b/pages/componentsA/navbar/index.vue
@@ -201,7 +201,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {
 		//height: 200vh;
 		height: calc(100% - 44px);

--- a/pages/componentsA/noNetwork/index.vue
+++ b/pages/componentsA/noNetwork/index.vue
@@ -44,6 +44,7 @@
 </script>

 <style scoped lang="scss">
+	@use "@/uview-ui/theme.scss" as *;
 	.no-net-tips {
 		color: $u-tips-color;
 		font-size: 26rpx;

--- a/pages/componentsA/parse/index.vue
+++ b/pages/componentsA/parse/index.vue
@@ -60,7 +60,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-content {
 		padding: 24rpx;
 		font-size: 32rpx;

--- a/pages/componentsA/select/index.vue
+++ b/pages/componentsA/select/index.vue
@@ -200,6 +200,7 @@ export default {
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 .badge-button {
 	padding: 4rpx 6rpx;
 	background-color: $u-type-error;

--- a/pages/componentsA/slider/index.vue
+++ b/pages/componentsA/slider/index.vue
@@ -116,6 +116,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.badge-button {
 		padding: 4rpx 6rpx;
 		background-color: $u-type-error;

--- a/pages/componentsA/tabs/index.vue
+++ b/pages/componentsA/tabs/index.vue
@@ -140,7 +140,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-config-wrap {

 	}

--- a/pages/componentsA/tag/index.vue
+++ b/pages/componentsA/tag/index.vue
@@ -85,7 +85,7 @@ export default {
 };
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .u-demo {
 }
 </style>
--- a/pages/componentsA/timeLine/index.vue
+++ b/pages/componentsA/timeLine/index.vue
@@ -102,7 +102,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx 24rpx 24rpx 40rpx;
 	}

--- a/pages/componentsA/toast/index.vue
+++ b/pages/componentsA/toast/index.vue
@@ -75,7 +75,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.no-mode-here {
 		color: $u-tips-color;
 		font-size: 28rpx;

--- a/pages/componentsA/topTips/index.vue
+++ b/pages/componentsA/topTips/index.vue
@@ -52,6 +52,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsA/verificationCode/index.vue
+++ b/pages/componentsA/verificationCode/index.vue
@@ -93,6 +93,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsB/card/index.vue
+++ b/pages/componentsB/card/index.vue
@@ -81,6 +81,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {
 		padding-top: 0;
 	}

--- a/pages/componentsB/checkbox/index.vue
+++ b/pages/componentsB/checkbox/index.vue
@@ -157,5 +157,6 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsB/divider/index.vue
+++ b/pages/componentsB/divider/index.vue
@@ -77,5 +77,6 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsB/dropdown/index.vue
+++ b/pages/componentsB/dropdown/index.vue
@@ -136,6 +136,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-config-wrap {
 		padding: 40rpx;
 	}

--- a/pages/componentsB/image/index.vue
+++ b/pages/componentsB/image/index.vue
@@ -91,6 +91,7 @@ export default {
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 .u-demo-area {
 }
 </style>
--- a/pages/componentsB/line/index.vue
+++ b/pages/componentsB/line/index.vue
@@ -62,6 +62,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo-area {

 	}

--- a/pages/componentsB/loading/index.vue
+++ b/pages/componentsB/loading/index.vue
@@ -73,5 +73,6 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsB/noticeBar/index.vue
+++ b/pages/componentsB/noticeBar/index.vue
@@ -137,7 +137,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.item {
 		margin-top: 30px;
 	}

--- a/pages/componentsB/picker/index.vue
+++ b/pages/componentsB/picker/index.vue
@@ -183,7 +183,8 @@ export default {
 };
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
+@use "@/uview-ui/theme.scss" as *;
 .input {
 	border: 1px solid $u-light-color;
 	border-radius: 4px;

--- a/pages/componentsB/radio/index.vue
+++ b/pages/componentsB/radio/index.vue
@@ -138,5 +138,6 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsB/rate/index.vue
+++ b/pages/componentsB/rate/index.vue
@@ -119,5 +119,6 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsB/readMore/index.vue
+++ b/pages/componentsB/readMore/index.vue
@@ -59,9 +59,9 @@
 	}
 </script>

-<style lang="scss" scoped>
-	// 通过/deep/样式穿透去控制组件的内容
-	.wrap /deep/ .u-content {
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
+	// 通过::v-deep样式穿透去控制组件的内容
+	.wrap ::v-deep .u-content {
 		color: #666!important;
 	}
 </style>
--- a/pages/componentsB/search/index.vue
+++ b/pages/componentsB/search/index.vue
@@ -91,6 +91,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsB/skeleton/index.vue
+++ b/pages/componentsB/skeleton/index.vue
@@ -102,7 +102,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.container {
 		text-align: left;
 		font-size: 28rpx;

--- a/pages/componentsB/steps/index.vue
+++ b/pages/componentsB/steps/index.vue
@@ -66,7 +66,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/componentsB/sticky/index.vue
+++ b/pages/componentsB/sticky/index.vue
@@ -62,7 +62,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo-area {
 		overflow: hidden;
 	}

--- a/pages/componentsB/swipeAction/index.vue
+++ b/pages/componentsB/swipeAction/index.vue
@@ -130,7 +130,7 @@ export default {
 };
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .item {
 	display: flex;
 	padding: 20rpx;

--- a/pages/componentsB/swiper/index.vue
+++ b/pages/componentsB/swiper/index.vue
@@ -82,7 +82,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.item {
 		margin: 30rpx 0;
 	}

--- a/pages/componentsB/switch/index.vue
+++ b/pages/componentsB/switch/index.vue
@@ -109,5 +109,6 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsB/tabbar/index.vue
+++ b/pages/componentsB/tabbar/index.vue
@@ -127,6 +127,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo-area {
 		margin: 0 -40rpx;
 	}

--- a/pages/componentsB/table/index.vue
+++ b/pages/componentsB/table/index.vue
@@ -76,7 +76,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/componentsB/upload/index.vue
+++ b/pages/componentsB/upload/index.vue
@@ -151,6 +151,7 @@
 </script>

 <style lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo-wrap {
 		background-color: #FFFFFF;
 		padding: 40rpx 8rpx;
@@ -164,7 +165,7 @@
 		font-size: 28rpx;
 	}

-	/deep/ .slot-btn {
+	::v-deep .slot-btn {
 		width: 329rpx;
 		height: 140rpx;
 		display: flex;

--- a/pages/componentsB/waterfall/index.vue
+++ b/pages/componentsB/waterfall/index.vue
@@ -151,7 +151,7 @@ page {
 }
 </style>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .demo-warter {
 	border-radius: 8px;
 	margin: 5px;

--- a/pages/componentsC/actionSheet/index.vue
+++ b/pages/componentsC/actionSheet/index.vue
@@ -75,7 +75,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/componentsC/alertTips/index.vue
+++ b/pages/componentsC/alertTips/index.vue
@@ -79,7 +79,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/componentsC/badge/index.vue
+++ b/pages/componentsC/badge/index.vue
@@ -71,7 +71,8 @@ export default {
 };
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
+@use "@/uview-ui/theme.scss" as *;
 .u-badge-wrap {
 	width: 60px;
 	height: 60px;

--- a/pages/componentsC/button/index.vue
+++ b/pages/componentsC/button/index.vue
@@ -110,12 +110,12 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.box {
 		padding: 30rpx;
 	}

-	.box /deep/ button {
+	.box ::v-deep button {
 		margin-bottom: 40rpx;
 	}
 </style>
--- a/pages/componentsC/cell/index.vue
+++ b/pages/componentsC/cell/index.vue
@@ -91,7 +91,7 @@
 	};
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.gab {
 		background-color: rgb(245, 245, 245);
 		height: 20rpx;

--- a/pages/componentsC/circleProgress/index.vue
+++ b/pages/componentsC/circleProgress/index.vue
@@ -38,7 +38,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/componentsC/collapse/index.vue
+++ b/pages/componentsC/collapse/index.vue
@@ -117,7 +117,7 @@
 	}
 </style>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		// padding: 24rpx;
 	}

--- a/pages/componentsC/color/index.vue
+++ b/pages/componentsC/color/index.vue
@@ -299,7 +299,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 18rpx;
 	}

--- a/pages/componentsC/countDown/index.vue
+++ b/pages/componentsC/countDown/index.vue
@@ -94,6 +94,7 @@ export default {
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 .count-down-demo {
 	justify-content: center;
 }

--- a/pages/componentsC/countTo/index.vue
+++ b/pages/componentsC/countTo/index.vue
@@ -125,7 +125,7 @@ export default {
 };
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .count-to-demo {
 	text-align: center;
 }

--- a/pages/componentsC/gap/index.vue
+++ b/pages/componentsC/gap/index.vue
@@ -56,7 +56,7 @@ export default {
 };
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .wrap {
 	padding: 24rpx;
 }

--- a/pages/componentsC/grid/index.vue
+++ b/pages/componentsC/grid/index.vue
@@ -143,6 +143,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 .grid-text {
 	font-size: 28rpx;
 	margin-top: 4rpx;

--- a/pages/componentsC/layout/index.vue
+++ b/pages/componentsC/layout/index.vue
@@ -116,6 +116,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.demo-layout {
 		height: 70rpx;
 		border-radius: 8rpx;
@@ -137,7 +138,7 @@
 	// H5中，电脑端文档演示时，可能会导致演示块挤出边界，特别处理。
 	// 真实使用环境不会产生此问题
 	/* #ifdef H5 */
-	.u-demo-area /deep/ .u-row {
+	.u-demo-area ::v-deep .u-row {
 		display: flex;
 		flex-wrap: wrap;
 	}

--- a/pages/componentsC/link/index.vue
+++ b/pages/componentsC/link/index.vue
@@ -49,6 +49,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsC/loadmore/index.vue
+++ b/pages/componentsC/loadmore/index.vue
@@ -91,6 +91,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsC/mask/index.vue
+++ b/pages/componentsC/mask/index.vue
@@ -74,6 +74,7 @@
 </script>

 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.warp {
 		display: flex;
 		align-items: center;

--- a/pages/componentsC/messageInput/index.vue
+++ b/pages/componentsC/messageInput/index.vue
@@ -92,6 +92,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsC/numberBox/index.vue
+++ b/pages/componentsC/numberBox/index.vue
@@ -72,6 +72,6 @@ export default {
 };
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .u-demo {}
 </style>
--- a/pages/componentsC/popup/index.vue
+++ b/pages/componentsC/popup/index.vue
@@ -89,7 +89,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/componentsC/progress/index.vue
+++ b/pages/componentsC/progress/index.vue
@@ -80,7 +80,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-progress-content {
 		display: flex;
 		align-items: center;

--- a/pages/componentsC/section/index.vue
+++ b/pages/componentsC/section/index.vue
@@ -66,6 +66,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/componentsC/subsection/index.vue
+++ b/pages/componentsC/subsection/index.vue
@@ -83,6 +83,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/example/components.vue
+++ b/pages/example/components.vue
@@ -63,7 +63,7 @@
 	} */
 </style>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;

 	.u-cell-icon {
 		width: 36rpx;

--- a/pages/example/js.vue
+++ b/pages/example/js.vue
@@ -60,7 +60,7 @@
 	} */
 </style>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-cell-icon {
 		width: 36rpx;
 		height: 36rpx;

--- a/pages/example/template.vue
+++ b/pages/example/template.vue
@@ -60,7 +60,7 @@
 	} */
 </style>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-cell-icon {
 		width: 36rpx;
 		height: 36rpx;

--- a/pages/library/color/index.vue
+++ b/pages/library/color/index.vue
@@ -49,6 +49,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/colorSwitch/index.vue
+++ b/pages/library/colorSwitch/index.vue
@@ -57,6 +57,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/debounce/index.vue
+++ b/pages/library/debounce/index.vue
@@ -69,7 +69,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-button {
 		margin-top: 50rpx;
 		margin-bottom: 50rpx;

--- a/pages/library/deepClone/index.vue
+++ b/pages/library/deepClone/index.vue
@@ -32,6 +32,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/deepMerge/index.vue
+++ b/pages/library/deepMerge/index.vue
@@ -69,6 +69,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/getRect/index.vue
+++ b/pages/library/getRect/index.vue
@@ -75,7 +75,7 @@ export default {
 };
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .u-demo {
 	min-height: 200vh;
 }

--- a/pages/library/globalVariable/globalData.vue
+++ b/pages/library/globalVariable/globalData.vue
@@ -44,6 +44,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/globalVariable/index.vue
+++ b/pages/library/globalVariable/index.vue
@@ -70,7 +70,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo-area {
 		margin-top: 50rpx;
 	}

--- a/pages/library/globalVariable/prototype.vue
+++ b/pages/library/globalVariable/prototype.vue
@@ -43,6 +43,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/globalVariable/vuex.vue
+++ b/pages/library/globalVariable/vuex.vue
@@ -35,6 +35,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/guid/index.vue
+++ b/pages/library/guid/index.vue
@@ -61,6 +61,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/http/index.vue
+++ b/pages/library/http/index.vue
@@ -55,6 +55,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/md5/index.vue
+++ b/pages/library/md5/index.vue
@@ -41,6 +41,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/mpShare/index.vue
+++ b/pages/library/mpShare/index.vue
@@ -14,6 +14,6 @@
 <script>
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/queryParams/index.vue
+++ b/pages/library/queryParams/index.vue
@@ -48,6 +48,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/random/index.vue
+++ b/pages/library/random/index.vue
@@ -53,7 +53,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-btn-wrap {
 		margin-top: 50rpx;
 	}

--- a/pages/library/randomArray/index.vue
+++ b/pages/library/randomArray/index.vue
@@ -42,6 +42,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/route/index.vue
+++ b/pages/library/route/index.vue
@@ -79,7 +79,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/library/route/routeTo.vue
+++ b/pages/library/route/routeTo.vue
@@ -40,7 +40,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

--- a/pages/library/test/index.vue
+++ b/pages/library/test/index.vue
@@ -91,6 +91,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/timeFormat/index.vue
+++ b/pages/library/timeFormat/index.vue
@@ -53,6 +53,6 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>
--- a/pages/library/timeFrom/index.vue
+++ b/pages/library/timeFrom/index.vue
--- a/pages/library/trim/index.vue
+++ b/pages/library/trim/index.vue
--- a/pages/template/address/addSite.vue
+++ b/pages/template/address/addSite.vue
--- a/pages/template/address/index.vue
+++ b/pages/template/address/index.vue
--- a/pages/template/comment/index.vue
+++ b/pages/template/comment/index.vue
--- a/pages/template/comment/reply.vue
+++ b/pages/template/comment/reply.vue
--- a/pages/template/coupon/index.vue
+++ b/pages/template/coupon/index.vue
--- a/pages/template/keyboardPay/index.vue
+++ b/pages/template/keyboardPay/index.vue
--- a/pages/template/login/code.vue
+++ b/pages/template/login/code.vue
--- a/pages/template/login/index.vue
+++ b/pages/template/login/index.vue
--- a/pages/template/mallMenu/index1.vue
+++ b/pages/template/mallMenu/index1.vue
--- a/pages/template/mallMenu/index2.vue
+++ b/pages/template/mallMenu/index2.vue
--- a/pages/template/order/index.vue
+++ b/pages/template/order/index.vue
--- a/pages/template/submitBar/index.vue
+++ b/pages/template/submitBar/index.vue
--- a/uni.scss
+++ b/uni.scss
--- a/uview-ui/README.md
+++ b/uview-ui/README.md
--- a/uview-ui/components/u-action-sheet/u-action-sheet.vue
+++ b/uview-ui/components/u-action-sheet/u-action-sheet.vue
--- a/uview-ui/components/u-alert-tips/u-alert-tips.vue
+++ b/uview-ui/components/u-alert-tips/u-alert-tips.vue
--- a/uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue
+++ b/uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue
--- a/uview-ui/components/u-avatar/u-avatar.vue
+++ b/uview-ui/components/u-avatar/u-avatar.vue
--- a/uview-ui/components/u-back-top/u-back-top.vue
+++ b/uview-ui/components/u-back-top/u-back-top.vue
--- a/uview-ui/components/u-badge/u-badge.vue
+++ b/uview-ui/components/u-badge/u-badge.vue
--- a/uview-ui/components/u-button/u-button.vue
+++ b/uview-ui/components/u-button/u-button.vue
--- a/uview-ui/components/u-calendar/u-calendar.vue
+++ b/uview-ui/components/u-calendar/u-calendar.vue
--- a/uview-ui/components/u-car-keyboard/u-car-keyboard.vue
+++ b/uview-ui/components/u-car-keyboard/u-car-keyboard.vue
--- a/uview-ui/components/u-card/u-card.vue
+++ b/uview-ui/components/u-card/u-card.vue
--- a/uview-ui/components/u-cell-group/u-cell-group.vue
+++ b/uview-ui/components/u-cell-group/u-cell-group.vue
--- a/uview-ui/components/u-cell-item/u-cell-item.vue
+++ b/uview-ui/components/u-cell-item/u-cell-item.vue
--- a/uview-ui/components/u-checkbox-group/u-checkbox-group.vue
+++ b/uview-ui/components/u-checkbox-group/u-checkbox-group.vue
--- a/uview-ui/components/u-checkbox/u-checkbox.vue
+++ b/uview-ui/components/u-checkbox/u-checkbox.vue
--- a/uview-ui/components/u-circle-progress/u-circle-progress.vue
+++ b/uview-ui/components/u-circle-progress/u-circle-progress.vue
--- a/uview-ui/components/u-circle-progress/u-line-progress/u-line-progress.vue
+++ b/uview-ui/components/u-circle-progress/u-line-progress/u-line-progress.vue
--- a/uview-ui/components/u-col/u-col.vue
+++ b/uview-ui/components/u-col/u-col.vue
--- a/uview-ui/components/u-collapse-item/u-collapse-item.vue
+++ b/uview-ui/components/u-collapse-item/u-collapse-item.vue
--- a/uview-ui/components/u-collapse/u-collapse.vue
+++ b/uview-ui/components/u-collapse/u-collapse.vue
--- a/uview-ui/components/u-column-notice/u-column-notice.vue
+++ b/uview-ui/components/u-column-notice/u-column-notice.vue
--- a/uview-ui/components/u-count-down/u-count-down.vue
+++ b/uview-ui/components/u-count-down/u-count-down.vue
--- a/uview-ui/components/u-count-to/u-count-to.vue
+++ b/uview-ui/components/u-count-to/u-count-to.vue
--- a/uview-ui/components/u-divider/u-divider.vue
+++ b/uview-ui/components/u-divider/u-divider.vue
--- a/uview-ui/components/u-dropdown-item/u-dropdown-item.vue
+++ b/uview-ui/components/u-dropdown-item/u-dropdown-item.vue
--- a/uview-ui/components/u-dropdown/u-dropdown.vue
+++ b/uview-ui/components/u-dropdown/u-dropdown.vue
--- a/uview-ui/components/u-empty/u-empty.vue
+++ b/uview-ui/components/u-empty/u-empty.vue
--- a/uview-ui/components/u-field/u-field.vue
+++ b/uview-ui/components/u-field/u-field.vue
--- a/uview-ui/components/u-form-item/u-form-item.vue
+++ b/uview-ui/components/u-form-item/u-form-item.vue
--- a/uview-ui/components/u-form/u-form.vue
+++ b/uview-ui/components/u-form/u-form.vue
--- a/uview-ui/components/u-full-screen/u-full-screen.vue
+++ b/uview-ui/components/u-full-screen/u-full-screen.vue
--- a/uview-ui/components/u-gap/u-gap.vue
+++ b/uview-ui/components/u-gap/u-gap.vue
--- a/uview-ui/components/u-grid-item/u-grid-item.vue
+++ b/uview-ui/components/u-grid-item/u-grid-item.vue
--- a/uview-ui/components/u-grid/u-grid.vue
+++ b/uview-ui/components/u-grid/u-grid.vue
--- a/uview-ui/components/u-icon/u-icon.vue
+++ b/uview-ui/components/u-icon/u-icon.vue
--- a/uview-ui/components/u-image/u-image.vue
+++ b/uview-ui/components/u-image/u-image.vue
--- a/uview-ui/components/u-index-anchor/u-index-anchor.vue
+++ b/uview-ui/components/u-index-anchor/u-index-anchor.vue
--- a/uview-ui/components/u-index-list/u-index-list.vue
+++ b/uview-ui/components/u-index-list/u-index-list.vue
--- a/uview-ui/components/u-input/u-input.vue
+++ b/uview-ui/components/u-input/u-input.vue
--- a/uview-ui/components/u-keyboard/u-keyboard.vue
+++ b/uview-ui/components/u-keyboard/u-keyboard.vue
--- a/uview-ui/components/u-lazy-load/u-lazy-load.vue
+++ b/uview-ui/components/u-lazy-load/u-lazy-load.vue
--- a/uview-ui/components/u-line-progress/u-line-progress.vue
+++ b/uview-ui/components/u-line-progress/u-line-progress.vue
--- a/uview-ui/components/u-line/u-line.vue
+++ b/uview-ui/components/u-line/u-line.vue
--- a/uview-ui/components/u-link/u-link.vue
+++ b/uview-ui/components/u-link/u-link.vue
--- a/uview-ui/components/u-loading-page/u-loading-page.vue
+++ b/uview-ui/components/u-loading-page/u-loading-page.vue
--- a/uview-ui/components/u-loading/u-loading.vue
+++ b/uview-ui/components/u-loading/u-loading.vue
--- a/uview-ui/components/u-loadmore/u-loadmore.vue
+++ b/uview-ui/components/u-loadmore/u-loadmore.vue
--- a/uview-ui/components/u-mask/u-mask.vue
+++ b/uview-ui/components/u-mask/u-mask.vue
--- a/uview-ui/components/u-message-input/u-message-input.vue
+++ b/uview-ui/components/u-message-input/u-message-input.vue
--- a/uview-ui/components/u-modal/u-modal.vue
+++ b/uview-ui/components/u-modal/u-modal.vue
--- a/uview-ui/components/u-navbar/u-navbar.vue
+++ b/uview-ui/components/u-navbar/u-navbar.vue
--- a/uview-ui/components/u-no-network/u-no-network.vue
+++ b/uview-ui/components/u-no-network/u-no-network.vue
--- a/uview-ui/components/u-notice-bar/u-notice-bar.vue
+++ b/uview-ui/components/u-notice-bar/u-notice-bar.vue
--- a/uview-ui/components/u-number-box/u-number-box.vue
+++ b/uview-ui/components/u-number-box/u-number-box.vue
--- a/uview-ui/components/u-number-keyboard/u-number-keyboard.vue
+++ b/uview-ui/components/u-number-keyboard/u-number-keyboard.vue
--- a/uview-ui/components/u-picker/u-picker.vue
+++ b/uview-ui/components/u-picker/u-picker.vue
--- a/uview-ui/components/u-popup/u-popup.vue
+++ b/uview-ui/components/u-popup/u-popup.vue
--- a/uview-ui/components/u-radio-group/u-radio-group.vue
+++ b/uview-ui/components/u-radio-group/u-radio-group.vue
--- a/uview-ui/components/u-radio/u-radio.vue
+++ b/uview-ui/components/u-radio/u-radio.vue
--- a/uview-ui/components/u-rate/u-rate.vue
+++ b/uview-ui/components/u-rate/u-rate.vue
--- a/uview-ui/components/u-read-more/u-read-more.vue
+++ b/uview-ui/components/u-read-more/u-read-more.vue
--- a/uview-ui/components/u-row-notice/u-row-notice.vue
+++ b/uview-ui/components/u-row-notice/u-row-notice.vue
--- a/uview-ui/components/u-row/u-row.vue
+++ b/uview-ui/components/u-row/u-row.vue
--- a/uview-ui/components/u-search/u-search.vue
+++ b/uview-ui/components/u-search/u-search.vue
--- a/uview-ui/components/u-section/u-section.vue
+++ b/uview-ui/components/u-section/u-section.vue
--- a/uview-ui/components/u-select/u-select.vue
+++ b/uview-ui/components/u-select/u-select.vue
--- a/uview-ui/components/u-skeleton/u-skeleton.vue
+++ b/uview-ui/components/u-skeleton/u-skeleton.vue
--- a/uview-ui/components/u-slider/u-slider.vue
+++ b/uview-ui/components/u-slider/u-slider.vue
--- a/uview-ui/components/u-steps/u-steps.vue
+++ b/uview-ui/components/u-steps/u-steps.vue
--- a/uview-ui/components/u-sticky/u-sticky.vue
+++ b/uview-ui/components/u-sticky/u-sticky.vue
--- a/uview-ui/components/u-subsection/u-subsection.vue
+++ b/uview-ui/components/u-subsection/u-subsection.vue
--- a/uview-ui/components/u-swipe-action/u-swipe-action.vue
+++ b/uview-ui/components/u-swipe-action/u-swipe-action.vue
--- a/uview-ui/components/u-swiper/u-swiper.vue
+++ b/uview-ui/components/u-swiper/u-swiper.vue
--- a/uview-ui/components/u-switch/u-switch.vue
+++ b/uview-ui/components/u-switch/u-switch.vue
--- a/uview-ui/components/u-tabbar/u-tabbar.vue
+++ b/uview-ui/components/u-tabbar/u-tabbar.vue
--- a/uview-ui/components/u-table/u-table.vue
+++ b/uview-ui/components/u-table/u-table.vue
--- a/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
+++ b/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
--- a/uview-ui/components/u-tabs/u-tabs.vue
+++ b/uview-ui/components/u-tabs/u-tabs.vue
--- a/uview-ui/components/u-tag/u-tag.vue
+++ b/uview-ui/components/u-tag/u-tag.vue
--- a/uview-ui/components/u-td/u-td.vue
+++ b/uview-ui/components/u-td/u-td.vue
--- a/uview-ui/components/u-th/u-th.vue
+++ b/uview-ui/components/u-th/u-th.vue
--- a/uview-ui/components/u-time-line-item/u-time-line-item.vue
+++ b/uview-ui/components/u-time-line-item/u-time-line-item.vue
--- a/uview-ui/components/u-time-line/u-time-line.vue
+++ b/uview-ui/components/u-time-line/u-time-line.vue
--- a/uview-ui/components/u-toast/u-toast.vue
+++ b/uview-ui/components/u-toast/u-toast.vue
--- a/uview-ui/components/u-top-tips/u-top-tips.vue
+++ b/uview-ui/components/u-top-tips/u-top-tips.vue
--- a/uview-ui/components/u-tr/u-tr.vue
+++ b/uview-ui/components/u-tr/u-tr.vue
--- a/uview-ui/components/u-upload/u-upload.vue
+++ b/uview-ui/components/u-upload/u-upload.vue
--- a/uview-ui/components/u-verification-code/u-verification-code.vue
+++ b/uview-ui/components/u-verification-code/u-verification-code.vue
--- a/uview-ui/components/u-waterfall/u-waterfall.vue
+++ b/uview-ui/components/u-waterfall/u-waterfall.vue
--- a/uview-ui/index.scss
+++ b/uview-ui/index.scss
--- a/uview-ui/libs/css/color.scss
+++ b/uview-ui/libs/css/color.scss
--- a/uview-ui/libs/css/style.vue.scss
+++ b/uview-ui/libs/css/style.vue.scss
--- a/uview-ui/package.json
+++ b/uview-ui/package.json
--- a/vue.config.js
+++ b/vue.config.js