node-sass写法升级到sass写法

.gitignore

@@ -3,3 +3,4 @@
 /.idea/*
 deploy.sh
 .hbuilderx/
+/package-lock.json

App.vue

@@ -18,6 +18,6 @@
 </script>
 
 <style lang="scss">
-	@import "uview-ui/index.scss";
-	@import "common/demo.scss";
-</style>
+	@use "uview-ui/index.scss" as *;
+	@use "common/demo.scss" as *;
+</style>
\ No newline at end of file

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规则(按需引入)

common/demo.scss

+@use "@/uview-ui/theme.scss" as *;
+
 /* #ifndef APP-NVUE */
 view,
 text {
@@ -43,7 +45,7 @@ text {
 	display: inline-block;
 	/* #endif */
 	text-align: left;
-	
+
 }
 
 .u-demo-title,

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;

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" : {

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=="
-    }
-  }
-}

pages/componentsA/avatar/index.vue

@@ -3,10 +3,10 @@
 		<view class="u-demo-wrap">
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
-				<u-avatar 
-					:mode="mode" 
-					:size="size" 
-					:src="src" 
+				<u-avatar
+					:mode="mode"
+					:size="size"
+					:src="src"
 					:text="text"
 					:showLevel="showLevel"
 					:showSex="showSex"
@@ -38,7 +38,7 @@
 			<view class="u-config-item">
 				<view class="u-item-title">尺寸</view>
 				<u-subsection current="1" :list="['large', 'default', 'mini', 160]" @change="sizeChange"></u-subsection>
-			</view> 
+			</view>
 		</view>
 	</view>
 </template>
@@ -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>

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;
 	}

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;
 	}

pages/componentsA/calendar/index.vue

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

pages/componentsA/empty/index.vue

@@ -101,14 +101,14 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo-area {
 		height: 160px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
-	
+
 	.u-demo-area .u-empty {
 		padding-top: 0;
 	}

pages/componentsA/field/index.vue

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

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;
 }

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>

pages/componentsA/icon/index.vue

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

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;

pages/componentsA/keyboard/index.vue

@@ -7,15 +7,15 @@
 					<input class="input" disabled type="text" :value="input" placeholder="来自键盘的输入内容" />
 					<u-button :custom-style="{height: '32px'}" :hairLine="false" class="clear-btn" @tap="input = ''">清空</u-button>
 				</view>
-				<u-keyboard :mask="mask" ref="uKeyboard" safe-area-inset-bottom @confirm="confirm" 
+				<u-keyboard :mask="mask" ref="uKeyboard" safe-area-inset-bottom @confirm="confirm"
 				:random="random" :dotEnable="false" :mode="mode"
-				:confirmBtn="true" :cancelBtn="true" :tooltip="tooltip" v-model="show" 
+				:confirmBtn="true" :cancelBtn="true" :tooltip="tooltip" v-model="show"
 				@change="change" @backspace="backspace"></u-keyboard>
 			</view>
 		</view>
 		<view class="u-config-wrap">
 			<view class="u-config-title u-border-bottom">
-				参数配置 
+				参数配置
 			</view>
 			<view class="u-config-item">
 				<view class="u-item-title">键盘开关</view>
@@ -46,12 +46,12 @@
 		data() {
 			return {
 				show: false,
-				input: '', 
+				input: '',
 				mode: 'number',
 				random: false,
 				tooltip: true,
 				mask: true,
-				
+
 			}
 		},
 		methods: {
@@ -85,13 +85,14 @@
 				this.input += detail;
 			},
 			confirm(e) {
-				
+
 			}
 		}
 	}
 </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;
@@ -101,11 +102,11 @@
 		flex: 1;
 		box-sizing: border-box;
 	}
-	
+
 	.input-wrap {
 		display: flex;
 	}
-	
+
 	.clear-btn {
 		margin-left: 10px;
 		font-size: 28rpx;

pages/componentsA/lazyLoad/index.vue

@@ -227,22 +227,22 @@
 				}, 1500);
 			}
 		},
-	} 
+	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 30rpx;
 		display: block;
-		
+
 	}
-	
+
 	.item-warp {
 		display: flex;
 		justify-content: space-between;
 		flex-wrap: wrap;
 	}
-	
+
 	.item-warp .item {
 		flex: 0 0 335rpx;
 		height: 400rpx;

pages/componentsA/modal/index.vue

@@ -5,7 +5,7 @@
 			<view class="u-demo-area">
 				<u-toast ref="uToast"></u-toast>
 				<view class="u-no-demo-here">请点击弹出弹窗查看效果</view>
-				<u-modal ref="uModal" v-model="show" :show-cancel-button="true" 
+				<u-modal ref="uModal" v-model="show" :show-cancel-button="true"
 					:show-title="showTitle" :async-close="asyncClose"
 					@confirm="confirm" :content="content"
 				>
@@ -84,6 +84,7 @@
 </script>
 
 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.logo {
 		height: auto;
 		will-change: transform;

pages/componentsA/navbar/index.vue

 <template>
 	<view class="">
-		<u-navbar title-color="#fff" back-icon-color="#ffffff" 
-			:is-fixed="isFixed" :is-back="isBack" 
-			:background="background" 
-			:back-text-style="{color: '#fff'}" :title="title" 
+		<u-navbar title-color="#fff" back-icon-color="#ffffff"
+			:is-fixed="isFixed" :is-back="isBack"
+			:background="background"
+			:back-text-style="{color: '#fff'}" :title="title"
 			:back-icon-name="backIconName" :back-text="backText"
 		>
 			<view class="slot-wrap" v-if="useSlot">
@@ -44,7 +44,7 @@
 				<view class="u-demo-area">
 					<u-toast ref="uToast"></u-toast>
 					<view class="u-no-demo-here">查看顶部导航栏效果</view>
-				</view> 
+				</view>
 			</view>
 			<view class="u-config-wrap">
 				<view class="u-config-title u-border-bottom">
@@ -173,7 +173,7 @@
 						background: color
 					}
 				}
-				
+
 			},
 			rightChange(index) {
 				if(index == 0) {
@@ -201,45 +201,45 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {
 		//height: 200vh;
 		height: calc(100% - 44px);
 		height: calc(100% - 44px - constant(safe-area-inset-top));
 		height: calc(100% - 44px - env(safe-area-inset-top));
 	}
-	
+
 	.wrap {
 		padding: 24rpx;
 	}
-	
+
 	.navbar-right {
 		margin-right: 24rpx;
 		display: flex;
 	}
-	
+
 	.search-wrap {
 		margin: 0 20rpx;
 		flex: 1;
 	}
-	
+
 	.right-item {
 		margin: 0 12rpx;
 		position: relative;
 		color: #ffffff;
 		display: flex;
 	}
-	
+
 	.message-box {
-		
+
 	}
-	
+
 	.slot-wrap {
 		display: flex;
 		align-items: center;
 		flex: 1;
 	}
-	
+
 	.map-wrap {
 		display: flex;
 		align-items: center;
@@ -250,7 +250,7 @@
 		border-radius: 100rpx;
 		margin-left: 30rpx;
 	}
-	
+
 	.map-wrap-text {
 		padding: 0 6rpx;
 	}

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;

pages/componentsA/parse/index.vue

@@ -11,7 +11,7 @@
 				detail: {
 					content: `
 						<div class="content_area" id="content_area" style="display: block;">
-						                    
+
 						                        <!--repaste.body.begin--><p>　　巴尼小镇是云南省怒江傈僳族自治州首个易地扶贫搬迁集中安置点。从山上的金满村搬迁到巴尼小镇，近3年的时间里，搬迁户们的生活发生了可喜的变化。</p>
 						<p class="photo_img_20190808" style="text-align: center;"><img src="//p2.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613380766481.jpg" alt="泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）" isflag="1"></p>
 						<p class="photo_alt_20190808" style="text-align: center;"><em></em>泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）</p>
@@ -46,7 +46,7 @@
 						<p>　　麻继成说，乡里组织搬迁群众将原住地的土地林地出租、流转或退耕还林，采取“合作社+村党总支+农户+基地”模式，种植花椒、核桃、草果、香橼等经济作物。现在，1000多亩花椒、1000多亩核桃、600多亩草果和300多亩香橼已经成了山上的“绿色银行”。“村里今年准备再发展250亩香橼，香橼两年就能挂果，收益前景非常可观。”</p>
 						<p>　　农产品“升了级”，收入也“开了源”。麻继成说，农民在企业承包的果园里务工，每天的工资有100元，如今每天都有二三十人在果园里干活。</p>
 						<p>　　“搬出去有盼头，留下来有干劲。”如今，乡里还在加紧研究制定金满村乡村旅游规划。“等客栈、农家乐、步行街都建好了，幸福一定来敲门。”洛本卓乡党委书记郝春荣说，巩固脱贫成果、走向乡村振兴，“好日子还在后头”。</p><!--repaste.body.end-->
-						                    
+
 						                </div>
 					`
 				}
@@ -55,12 +55,12 @@
 		onLoad() {
 		},
 		methods: {
-			
+
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-content {
 		padding: 24rpx;
 		font-size: 32rpx;

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;

pages/componentsA/slider/index.vue

@@ -4,10 +4,10 @@
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
 				<u-toast ref="uToast"></u-toast>
-				<u-slider :step="step" :height="height" :block-width="blockWidth" 
-					:active-color="activeColor" :value="30" 
+				<u-slider :step="step" :height="height" :block-width="blockWidth"
+					:active-color="activeColor" :value="30"
 					:use-slot="useSlot" v-model="value"
-					:min="min" :max="max" 
+					:min="min" :max="max"
 					@end="end"
 					@moving="moving"
 				>
@@ -68,7 +68,7 @@
 			};
 		},
 		onLoad() {
-			
+
 		},
 		computed: {
 			current() {
@@ -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;

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 {
 
 	}

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>

pages/componentsA/timeLine/index.vue

@@ -96,17 +96,17 @@
 	export default {
 		data() {
 			return {
-				
+
 			}
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx 24rpx 24rpx 40rpx;
 	}
-	
+
 	.u-node {
 		width: 44rpx;
 		height: 44rpx;
@@ -116,28 +116,28 @@
 		align-items: center;
 		background: #d0d0d0;
 	}
-	
+
 	.u-order-title {
 		color: #333333;
 		font-weight: bold;
 		font-size: 32rpx;
 	}
-	
+
 	.u-order-title.unacive {
 		color: rgb(150, 150, 150);
 	}
-	
+
 	.u-order-desc {
 		color: rgb(150, 150, 150);
 		font-size: 28rpx;
 		margin-bottom: 6rpx;
 	}
-	
+
 	.u-order-time {
 		color: rgb(200, 200, 200);
 		font-size: 26rpx;
 	}
-	
+
 	.tel {
 		color: $u-type-primary;
 	}

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;

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>
+</style>
\ No newline at end of file

pages/componentsA/verificationCode/index.vue

@@ -4,8 +4,8 @@
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
 				<u-toast ref="uToast"></u-toast>
-				<u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode" 
-				@change="codeChange" :startText="startText" :changeText="changeText" 
+				<u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode"
+				@change="codeChange" :startText="startText" :changeText="changeText"
 				:endText="endText"></u-verification-code>
 				<u-button @click="getCode">{{tips}}</u-button>
 				<u-button :custom-style="{marginTop: '30rpx'}" @tap="reset" style="margin-top: 30rpx;">重置</u-button>
@@ -93,6 +93,6 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

pages/componentsB/card/index.vue

@@ -2,7 +2,7 @@
 	<view class="">
 		<view class="u-card-wrap">
 			<u-card @click="click" @head-click="headClick" :title="title" :sub-title="subTitle" :thumb="thumb" :padding="padding" :border="border">
-				<view class="" slot="body"> 
+				<view class="" slot="body">
 					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
 						<view class="u-body-item-title u-line-2">
 							瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半
@@ -81,21 +81,22 @@
 </script>
 
 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {
 		padding-top: 0;
 	}
-	
-	.u-card-wrap { 
+
+	.u-card-wrap {
 		background-color: $u-bg-color;
 		padding: 1px;
 	}
-	
+
 	.u-body-item {
 		font-size: 32rpx;
 		color: #333;
 		padding: 20rpx 10rpx;
 	}
-		
+
 	.u-body-item image {
 		width: 120rpx;
 		flex: 0 0 120rpx;

pages/componentsB/checkbox/index.vue

@@ -4,13 +4,13 @@
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
 				<view class="">
-					<u-checkbox-group :size="size" :width="width" 
-						:wrap="wrap" :max="max" 
-						@change="checkboxGroupChange" 
+					<u-checkbox-group :size="size" :width="width"
+						:wrap="wrap" :max="max"
+						@change="checkboxGroupChange"
 						:activeColor="activeColor"
 					>
 						<u-checkbox @change="checkboxChange"
-							v-model="item.checked" v-for="(item, index) in list" 
+							v-model="item.checked" v-for="(item, index) in list"
 							:key="index" :name="item.name"
 							:shape="shape"
 							:disabled="item.disabled"
@@ -157,5 +157,6 @@
 </script>
 
 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

pages/componentsB/divider/index.vue

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

pages/componentsB/dropdown/index.vue

@@ -33,14 +33,14 @@
 			<view class="u-config-item">
 				<view class="u-item-title">遮罩是否可点击</view>
 				<u-subsection :list="['是', '否']" @change="maskChange"></u-subsection>
-			</view> 
+			</view>
 		</view>
 	</view>
 </template>
 
 <script>
 	export default {
-		data() { 
+		data() {
 			return {
 				value1: '',
 				value2: '2',
@@ -136,20 +136,21 @@
 </script>
 
 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-config-wrap {
 		padding: 40rpx;
 	}
-	
+
 	.slot-content {
 		background-color: #FFFFFF;
 		padding: 24rpx;
-		
+
 		.item-box {
 			margin-bottom: 50rpx;
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: space-between;
-			
+
 			.item {
 				border: 1px solid $u-type-primary;
 				color: $u-type-primary;
@@ -157,7 +158,7 @@
 				border-radius: 100rpx;
 				margin-top: 30rpx;
 			}
-			
+
 			.active {
 				color: #FFFFFF;
 				background-color: $u-type-primary;

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>

pages/componentsB/line/index.vue

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

pages/componentsB/loading/index.vue

@@ -36,7 +36,7 @@
 			return {
 				mode: 'circle',
 				color: '#c7c7c7',
-				size: '34', 
+				size: '34',
 				show: true
 			}
 		},
@@ -73,5 +73,6 @@
 </script>
 
 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

pages/componentsB/noticeBar/index.vue

@@ -4,7 +4,7 @@
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
 				<u-toast :type="type" ref="uToast"></u-toast>
-				<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" @getMore="getMore" 
+				<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" @getMore="getMore"
 				:mode="mode" @end="end" @close="close" @click="click" :show="show" :type="type" :list="list"
 				:moreIcon="moreIcon" :volumeIcon="volumeIcon" :duration="duration" :isCircular="isCircular"></u-notice-bar>
 			</view>
@@ -64,7 +64,7 @@
 			}
 		},
 		onLoad() {
-			
+
 		},
 		methods: {
 			typeChange(index) {
@@ -119,7 +119,7 @@
 				} else {
 					this.toast(`点击了第${index + 1}条消息`);
 				}
-				
+
 			},
 			getMore() {
 				this.toast(`点击了更多图标`);
@@ -137,7 +137,7 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.item {
 		margin-top: 30px;
 	}

pages/componentsB/picker/index.vue

@@ -138,7 +138,7 @@ export default {
 			let column = e.column, index = e.index;
 			this.defaultSelector[column] = index;
 			switch (column) {
-				case 0: 
+				case 0:
 					switch (index) {
 						case 0:
 							this.range[1] = ['中国', '日本']
@@ -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;

pages/componentsB/radio/index.vue

@@ -79,7 +79,7 @@
 				],
 				disabled: false,
 				result: '荔枝',
-				shape: 'circle', 
+				shape: 'circle',
 				value: '荔枝',
 				activeColor: '#2979ff',
 				size: 34,
@@ -138,5 +138,6 @@
 </script>
 
 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

pages/componentsB/rate/index.vue

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

pages/componentsB/readMore/index.vue

@@ -30,7 +30,7 @@
 	</view>
 </template>
 
-<script> 
+<script>
 	export default {
 		data() {
 			return {
@@ -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>
+</style>
\ No newline at end of file

pages/componentsB/search/index.vue

@@ -4,7 +4,7 @@
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
 				<u-toast ref="uToast"></u-toast>
-				<u-search v-model="value" @change="change" @custom="custom" @search="search" :shape="shape" :clearabled="clearabled" 
+				<u-search v-model="value" @change="change" @custom="custom" @search="search" :shape="shape" :clearabled="clearabled"
 				:show-action="showAction" :input-align="inputAlign" @clear="clear"></u-search>
 			</view>
 		</view>
@@ -91,6 +91,6 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

pages/componentsB/skeleton/index.vue

@@ -21,7 +21,7 @@
 					</view>
 				</view>
 				<!--引用组件-->
-				<u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation" 
+				<u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation"
 				:el-color="elColor" :border-radius="borderRadius"></u-skeleton>
 			</view>
 		</view>
@@ -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;

pages/componentsB/steps/index.vue

@@ -66,11 +66,11 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}
-	
+
 	.box {
 		margin: 50rpx 0;
 	}

pages/componentsB/sticky/index.vue

@@ -62,19 +62,19 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo-area {
 		overflow: hidden;
 	}
-	
+
 	.u-config-wrap {
 		height: 200vh;
 	}
-	
+
 	.u-demo-title {
 		margin-bottom: 140rpx;
 	}
-	
+
 	.sticky {
 		background-color: $u-type-primary;
 		color: #fff;

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;

pages/componentsB/swiper/index.vue

@@ -4,7 +4,7 @@
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
 				<u-toast ref="uToast"></u-toast>
-				<u-swiper @change="change" :height="250" :list="list" :title="title" :effect3d="effect3d" 
+				<u-swiper @change="change" :height="250" :list="list" :title="title" :effect3d="effect3d"
 				:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper>
 			</view>
 		</view>
@@ -53,7 +53,7 @@
 				mode: 'round',
 				indicatorPos: 'bottomCenter',
 				effect3d: false,
-				
+
 			}
 		},
 		methods: {
@@ -82,7 +82,7 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.item {
 		margin: 30rpx 0;
 	}

pages/componentsB/switch/index.vue

@@ -3,8 +3,8 @@
 		<view class="u-demo-wrap">
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
-				<u-switch v-model="checked" :loading="loading" 
-					:size="size" @change="change" 
+				<u-switch v-model="checked" :loading="loading"
+					:size="size" @change="change"
 					:active-color="activeColor"
 					:disabled="disabled"
 					:activeValue="100"
@@ -109,5 +109,6 @@
 </script>
 
 <style scoped lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

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;
 	}

pages/componentsB/table/index.vue

@@ -37,7 +37,7 @@
 				参数配置
 			</view>
 			<view class="u-config-item">
-				<view class="u-item-title">边框颜色</view>   
+				<view class="u-item-title">边框颜色</view>
 				<u-subsection :list="['gray', 'primary', 'warning']" @change="borderColorChange"></u-subsection>
 			</view>
 			<view class="u-config-item">
@@ -76,7 +76,7 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

pages/componentsB/upload/index.vue

@@ -72,7 +72,7 @@
 			}
 		},
 		onLoad() {
-			
+
 		},
 		methods: {
 			reUpload() {
@@ -100,7 +100,7 @@
 				if (index == 0) {
 					this.showUploadList = false;
 					this.customBtn = true;
-					
+
 				} else {
 					this.showUploadList = true;
 					this.customBtn = false;
@@ -151,20 +151,21 @@
 </script>
 
 <style lang="scss">
+@use "@/uview-ui/theme.scss" as *;
 	.u-demo-wrap {
 		background-color: #FFFFFF;
 		padding: 40rpx 8rpx;
 		margin-left: -14rpx;
 		margin-right: -14rpx;
 	}
-	
+
 	.u-add-wrap {
 		flex-direction: column;
 		color: $u-content-color;
 		font-size: 28rpx;
 	}
-	
-	/deep/ .slot-btn {
+
+	::v-deep .slot-btn {
 		width: 329rpx;
 		height: 140rpx;
 		display: flex;

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;

pages/componentsC/actionSheet/index.vue

@@ -5,9 +5,9 @@
 			<view class="u-demo-area">
 				<u-toast ref="uToast"></u-toast>
 				<u-button @click="showAction">唤起ActionSheet</u-button>
-				<u-action-sheet :cancel-btn="cancel" :mask-close-able="maskClick" :tips="tips" 
+				<u-action-sheet :cancel-btn="cancel" :mask-close-able="maskClick" :tips="tips"
 				@click="click" :list="list" v-model="show" :safe-area-inset-bottom="true"></u-action-sheet>
-			</view> 
+			</view>
 		</view>
 		<view class="u-config-wrap">
 			<view class="u-config-title u-border-bottom">
@@ -75,7 +75,7 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}

pages/componentsC/alertTips/index.vue

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

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;

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>

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;

pages/componentsC/circleProgress/index.vue

@@ -33,30 +33,30 @@
 			}, 1500);
 		},
 		methods: {
-			
+
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}
-	
+
 	.u-progress-content {
 		position: absolute;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
-	
+
 	.u-progress-dot {
 		width: 16rpx;
 		height: 16rpx;
 		border-radius: 50%;
 		background-color: #fb9126;
 	}
-	
+
 	.u-progress-info {
 		font-size: 28rpx;
 		padding-left: 16rpx;

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;
 	}

pages/componentsC/color/index.vue

@@ -235,7 +235,7 @@
 			</view>
 		</view>
 		<view class="item">
-			<view class="title">                                                                                                          
+			<view class="title">
 				边框颜色
 			</view>
 			<view class="color-box">
@@ -299,29 +299,29 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 18rpx;
 	}
-	
+
 	.item {
 		margin: 30rpx 0;
 		margin-top: 44rpx;
-		
+
 		&:first-child {
 			margin-top: 0;
 		}
-		
+
 		&:last-child {
 			margin-bottom: 0;
 		}
-		
+
 		.title {
 			font-size: 30rpx;
 			position: relative;
 			line-height: 1;
 			padding-left: 22rpx;
-			
+
 			&:before {
 				width: 4px;
 				height: 15px;
@@ -333,7 +333,7 @@
 				top: -1px;
 			}
 		}
-		
+
 		.color-box {
 			display: flex;
 			align-items: center;
@@ -341,7 +341,7 @@
 			color: #fff;
 			text-align: center;
 			margin-top: 20rpx;
-			
+
 			.color-item {
 				display: flex;
 				flex: 1;
@@ -350,12 +350,12 @@
 				border-radius: 6rpx;
 				padding: 12rpx 0;
 			}
-			
-			
+
+
 			.color-title {
 				font-size: 28rpx;
 			}
-			
+
 			.color-value {
 				font-size: 24rpx;
 			}

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;
 }

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;
 }

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;
 }

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;

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;
 	}

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>

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>
+</style>
\ No newline at end of file

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;

pages/componentsC/messageInput/index.vue

@@ -51,7 +51,7 @@
 			return {
 				mode: 'box',
 				maxlength: 4,
-				value: '', 
+				value: '',
 				bold: true,
 				breathe: true,
 				dotFill: false,
@@ -92,6 +92,6 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

pages/componentsC/numberBox/index.vue

@@ -40,7 +40,7 @@ export default {
 			color: '#323233',
 			disabled: false,
 			step: 1,
-			
+
 		};
 	},
 	methods: {
@@ -72,6 +72,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .u-demo {}
 </style>

pages/componentsC/popup/index.vue

@@ -5,8 +5,8 @@
 			<view class="u-demo-area">
 				<u-toast ref="uToast"></u-toast>
 				<u-button @click="btnClick">唤起弹窗</u-button>
-				<u-popup border-radius="10" v-model="show" 
-					@close="close" @open="open" :mode="mode" 
+				<u-popup border-radius="10" v-model="show"
+					@close="close" @open="open" :mode="mode"
 					length="50%" :mask="mask"
 					:closeable="closeable"
 					:close-icon-pos="closeIconPos"
@@ -89,11 +89,11 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}
-	
+
 	.close-btn {
 		height: 100%;
 		display: flex;

pages/componentsC/progress/index.vue

@@ -3,9 +3,9 @@
 		<view class="u-demo-wrap">
 			<view class="u-demo-title">演示效果</view>
 			<view class="u-demo-area">
-				<u-line-progress v-if="mode == 'line'" :percent="percent" :active-color="activeColor" 
+				<u-line-progress v-if="mode == 'line'" :percent="percent" :active-color="activeColor"
 				:striped="striped" :stripedActive="stripedActive"></u-line-progress>
-				<u-circle-progress v-else :percent="percent" :active-color="activeColor" 
+				<u-circle-progress v-else :percent="percent" :active-color="activeColor"
 				bg-color="rgb(250, 250, 250)">
 					<view class="u-progress-content">
 						<view class="u-progress-dot"></view>
@@ -75,25 +75,25 @@
 					this.current = 0;
 				}
 			},
-			
+
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-progress-content {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
-	
+
 	.u-progress-dot {
 		width: 16rpx;
 		height: 16rpx;
 		border-radius: 50%;
 		background-color: #fb9126;
 	}
-	
+
 	.u-progress-info {
 		font-size: 28rpx;
 		padding-left: 16rpx;

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>

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>

pages/example/components.vue

@@ -39,11 +39,11 @@
 			});
 		},
 		created() {
-			
+
 		},
 		methods: {
 			openPage(path) {
-				this.$u.route({ 
+				this.$u.route({
 					url: path
 				})
 			},
@@ -63,8 +63,8 @@
 	} */
 </style>
 
-<style lang="scss" scoped>
-	
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
+
 	.u-cell-icon {
 		width: 36rpx;
 		height: 36rpx;

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;

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;

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>

pages/library/colorSwitch/index.vue

@@ -47,7 +47,7 @@
 				let color = index == 0 ? '#0edc8a' : index == 1 ? '#d0a73c' : '#3308dd';
 				this.result = this.$u.hexToRgb(color)
 			},
-			colorGradientChange(index) { 
+			colorGradientChange(index) {
 				this.result = JSON.stringify(this.$u.colorGradient('rgb(21,21,21)', 'rgb(56,56,56)', 10))
 			},
 			getResult() {
@@ -57,6 +57,6 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

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;
@@ -81,12 +81,12 @@
 		border: 1px solid $u-type-primary;
 		color: $u-type-primary;
 	}
-	
+
 	.u-button--hover {
 		color: #fff;
 		background-color: $u-type-primary;
 	}
-	
+
 	.u-demo-result-line {
 		display: flex;
 		justify-content: center;

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>

pages/library/deepMerge/index.vue

@@ -6,7 +6,7 @@
 				<view class="u-no-demo-here">
 					源对象1为："{info: {name: 'mary'}}"
 					<view class="">
-						
+
 					</view>
 					源对象2为："{info: {age: '22'}}"
 				</view>
@@ -69,6 +69,6 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

pages/library/getRect/index.vue

@@ -75,10 +75,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 .u-demo {
 	min-height: 200vh;
-}	
+}
 
 .rect-block-1 {
 	background-color: #a0cfff;

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>

pages/library/globalVariable/index.vue

@@ -61,7 +61,7 @@
 		methods: {
 			modeChange(index) {
 				let url = '';
-				if(index == 0) url = '/pages/library/globalVariable/globalData'; 
+				if(index == 0) url = '/pages/library/globalVariable/globalData';
 				if(index == 1) url = '/pages/library/globalVariable/prototype';
 				if(index == 2) url = '/pages/library/globalVariable/vuex';
 				this.$u.route(url);
@@ -70,11 +70,11 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo-area {
 		margin-top: 50rpx;
 	}
-	
+
 	.btn-wrap {
 		margin-top: 40rpx;
 		padding: 0 10%;

pages/library/globalVariable/prototype.vue

@@ -31,7 +31,7 @@
 			}
 		},
 		onShow() {
-			
+
 		},
 		methods: {
 			vuePrototypeChange(index) {
@@ -43,6 +43,6 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.u-demo {}
 </style>

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>
+</style>
\ No newline at end of file

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>

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>

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>

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>

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>

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;
 	}

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>

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;
 	}

pages/library/route/routeTo.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-	export default { 
+	export default {
 		data() {
 			return {
 				params: {}
@@ -40,11 +40,11 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>@use "@/uview-ui/theme.scss" as *;
 	.wrap {
 		padding: 24rpx;
 	}
-	
+
 	.u-btn-wrap {
 		margin-top: 50rpx;
 	}

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>

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>