feat(KIP-7543): 将所有 sass 转为 less，确保编译稳定

package.json

@@ -43,7 +43,6 @@
     "less-loader": "^7.3.0",
     "mini-types": "*",
     "miniprogram-api-typings": "*",
-    "node-sass": "^4.14.1",
     "postcss": "^8.4.18",
     "postcss-comment": "^2.0.0",
     "postcss-import": "^15.0.0",
@@ -52,7 +51,8 @@
     "postcss-px-to-viewport": "^1.1.1",
     "postcss-style-px-to-viewport": "^2.9.1",
     "prettier": "^2.7.1",
-    "sass-loader": "^10.3.1",
+    "sass": "^1.56.2",
+    "sass-loader": "^13.2.0",
     "vue-template-compiler": "^2.6.11",
     "webpack": "^4.36.0"
   },

src/components/info/components/uni-data-checkbox/uni-data-checkbox.vue

@@ -453,19 +453,19 @@
 	}
 </script>
 
-<style lang="scss">
-	$checked-color: #007aff;
-	$border-color: #DCDFE6;
-	$disable:0.4;
+<style lang="less">
+	@checked-color: #007aff;
+	@border-color: #DCDFE6;
+	@disable:0.4;
 
-	@mixin flex {
+	.flex {
 		/* #ifndef APP-NVUE */
 		display: flex;
 		/* #endif */
 	}
 
 	.uni-data-loading {
-		@include flex;
+		.flex;
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
@@ -480,7 +480,7 @@
 
 		// 多选样式
 		.checklist-group {
-			@include flex;
+			.flex;
 			flex-direction: row;
 			flex-wrap: wrap;
 
@@ -489,7 +489,7 @@
 			}
 
 			.checklist-box {
-				@include flex;
+				.flex;
 				flex-direction: row;
 				align-items: center;
 				position: relative;
@@ -503,7 +503,7 @@
 
 				// 文字样式
 				.checklist-content {
-					@include flex;
+					.flex;
 					flex: 1;
 					flex-direction: row;
 					align-items: center;
@@ -540,7 +540,7 @@
 					position: relative;
 					width: 16px;
 					height: 16px;
-					border: 1px solid $border-color;
+					border: 1px solid @border-color;
 					border-radius: 2px;
 					background-color: #fff;
 					z-index: 1;
@@ -569,7 +569,7 @@
 
 				// 单选样式
 				.radio__inner {
-					@include flex;
+					.flex;
 					/* #ifndef APP-NVUE */
 					flex-shrink: 0;
 					box-sizing: border-box;
@@ -579,7 +579,7 @@
 					position: relative;
 					width: 16px;
 					height: 16px;
-					border: 1px solid $border-color;
+					border: 1px solid @border-color;
 					border-radius: 16px;
 					background-color: #fff;
 					z-index: 1;
@@ -602,7 +602,7 @@
 						/* #endif */
 						.checkbox__inner {
 							background-color: #F2F6FC;
-							border-color: $border-color;
+							border-color: @border-color;
 							/* #ifdef H5 */
 							cursor: not-allowed;
 							/* #endif */
@@ -610,7 +610,7 @@
 
 						.radio__inner {
 							background-color: #F2F6FC;
-							border-color: $border-color;
+							border-color: @border-color;
 						}
 						.checklist-text {
 							color: #999;
@@ -620,8 +620,8 @@
 					// 选中
 					&.is-checked {
 						.checkbox__inner {
-							border-color: $checked-color;
-							background-color: $checked-color;
+							border-color: @checked-color;
+							background-color: @checked-color;
 
 							.checkbox__inner-icon {
 								opacity: 1;
@@ -629,26 +629,26 @@
 							}
 						}
 						.radio__inner {
-							border-color: $checked-color;
+							border-color: @checked-color;
 							.radio__inner-icon {
 								opacity: 1;
-								background-color: $checked-color;
+								background-color: @checked-color;
 							}
 						}
 						.checklist-text {
-							color: $checked-color;
+							color: @checked-color;
 						}
 						// 选中禁用
 						&.is-disable {
 							.checkbox__inner {
-								opacity: $disable;
+								opacity: @disable;
 							}
 
 							.checklist-text {
-								opacity: $disable;
+								opacity: @disable;
 							}
 							.radio__inner {
-								opacity: $disable;
+								opacity: @disable;
 							}
 						}
 					}
@@ -658,7 +658,7 @@
 				&.is--button {
 					margin-right: 10px;
 					padding: 5px 15px;
-					border: 1px $border-color solid;
+					border: 1px @border-color solid;
 					border-radius: 3px;
 					transition: border-color 0.2s;
 
@@ -668,17 +668,17 @@
 						cursor: not-allowed;
 						/* #endif */
 						border: 1px #eee solid;
-						opacity: $disable;
+						opacity: @disable;
 						.checkbox__inner {
 							background-color: #F2F6FC;
-							border-color: $border-color;
+							border-color: @border-color;
 							/* #ifdef H5 */
 							cursor: not-allowed;
 							/* #endif */
 						}
 						.radio__inner {
 							background-color: #F2F6FC;
-							border-color: $border-color;
+							border-color: @border-color;
 							/* #ifdef H5 */
 							cursor: not-allowed;
 							/* #endif */
@@ -689,10 +689,10 @@
 					}
 
 					&.is-checked {
-						border-color: $checked-color;
+						border-color: @checked-color;
 						.checkbox__inner {
-							border-color: $checked-color;
-							background-color: $checked-color;
+							border-color: @checked-color;
+							background-color: @checked-color;
 							.checkbox__inner-icon {
 								opacity: 1;
 								transform: rotate(45deg);
@@ -700,21 +700,21 @@
 						}
 
 						.radio__inner {
-							border-color: $checked-color;
+							border-color: @checked-color;
 
 							.radio__inner-icon {
 								opacity: 1;
-								background-color: $checked-color;
+								background-color: @checked-color;
 							}
 						}
 
 						.checklist-text {
-							color: $checked-color;
+							color: @checked-color;
 						}
 
 						// 选中禁用
 						&.is-disable {
-							opacity: $disable;
+							opacity: @disable;
 						}
 					}
 				}
@@ -723,7 +723,7 @@
 				&.is--tag {
 					margin-right: 10px;
 					padding: 5px 10px;
-					border: 1px $border-color solid;
+					border: 1px @border-color solid;
 					border-radius: 3px;
 					background-color: #f5f5f5;
 
@@ -737,12 +737,12 @@
 						/* #ifdef H5 */
 						cursor: not-allowed;
 						/* #endif */
-						opacity: $disable;
+						opacity: @disable;
 					}
 
 					&.is-checked {
-						background-color: $checked-color;
-						border-color: $checked-color;
+						background-color: @checked-color;
+						border-color: @checked-color;
 
 						.checklist-text {
 							color: #fff;
@@ -769,7 +769,7 @@
 						/* #endif */
 						.checkbox__inner {
 							background-color: #F2F6FC;
-							border-color: $border-color;
+							border-color: @border-color;
 							/* #ifdef H5 */
 							cursor: not-allowed;
 							/* #endif */
@@ -781,8 +781,8 @@
 
 					&.is-checked {
 						.checkbox__inner {
-							border-color: $checked-color;
-							background-color: $checked-color;
+							border-color: @checked-color;
+							background-color: @checked-color;
 
 							.checkbox__inner-icon {
 								opacity: 1;
@@ -795,24 +795,24 @@
 							}
 						}
 						.checklist-text {
-							color: $checked-color;
+							color: @checked-color;
 						}
 
 						.checklist-content {
 							.checkobx__list {
 								opacity: 1;
-								border-color: $checked-color;
+								border-color: @checked-color;
 							}
 						}
 
 						// 选中禁用
 						&.is-disable {
 							.checkbox__inner {
-								opacity: $disable;
+								opacity: @disable;
 							}
 
 							.checklist-text {
-								opacity: $disable;
+								opacity: @disable;
 							}
 						}
 					}

src/components/simple-address/simple-address.vue

@@ -326,7 +326,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .simple-address {
 	/* #ifndef APP-NVUE */
 	display: flex;
@@ -436,7 +436,7 @@ export default {
 
 .simple-address__header-text {
 	text-align: center;
-	font-size: $uni-font-size-base;
+	font-size: @uni-font-size-base;
 	color: #1aad19;
 	line-height: 70px;
 	padding-left: 40px;

src/components/uni-popup/uni-popup-dialog.vue

@@ -182,7 +182,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .uni-popup-dialog {
   width: 300px;
   border-radius: 15px;
@@ -251,7 +251,7 @@ export default {
   font-size: 14px;
 }
 .uni-button-color {
-  color: $uni-color-primary;
+  color: @uni-color-primary;
 }
 .uni-dialog-btn-text-change {
   font-size: 34px;
@@ -263,15 +263,15 @@ export default {
 }
 
 .uni-popup__success {
-  color: $uni-color-success;
+  color: @uni-color-success;
 }
 
 .uni-popup__warn {
-  color: $uni-color-warning;
+  color: @uni-color-warning;
 }
 
 .uni-popup__error {
-  color: $uni-color-error;
+  color: @uni-color-error;
 }
 
 .uni-popup__info {

src/components/uni-popup/uni-popup-message.vue

@@ -65,7 +65,7 @@
 		}
 	}
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 	.uni-popup-message {
 		/* #ifndef APP-NVUE */
 		display: flex;

src/components/uni-popup/uni-popup-share.vue

@@ -83,7 +83,7 @@
 		}
 	}
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 	.uni-popup-share {
 		background-color: #fff;
 	}

src/components/uni-popup/uni-popup.vue

@@ -205,7 +205,7 @@
 		}
 	}
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 	.uni-popup {
 		position: fixed;
 		/* #ifndef APP-NVUE */
@@ -219,7 +219,7 @@
 		bottom: 0;
 		left: 0;
 		right: 0;
-		background-color: $uni-bg-color-mask;
+		background-color: @uni-bg-color-mask;
 		opacity: 0;
 	}
 

src/styles/uni.less

@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+@uni-color-primary: #007aff;
+@uni-color-success: #4cd964;
+@uni-color-warning: #f0ad4e;
+@uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+@uni-text-color:#333;//基本色
+@uni-text-color-inverse:#fff;//反色
+@uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+@uni-text-color-placeholder: #808080;
+@uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+@uni-bg-color:#ffffff;
+@uni-bg-color-grey:#f8f8f8;
+@uni-bg-color-hover:#f1f1f1;//点击状态颜色
+@uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+@uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+@uni-font-size-sm:24upx;
+@uni-font-size-base:28upx;
+@uni-font-size-lg:32upx;
+
+/* 图片尺寸 */
+@uni-img-size-sm:40upx;
+@uni-img-size-base:52upx;
+@uni-img-size-lg:80upx;
+
+/* Border Radius */
+@uni-border-radius-sm: 4upx;
+@uni-border-radius-base: 6upx;
+@uni-border-radius-lg: 12upx;
+@uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+@uni-spacing-row-sm: 10px;
+@uni-spacing-row-base: 20upx;
+@uni-spacing-row-lg: 30upx;
+
+/* 垂直间距 */
+@uni-spacing-col-sm: 8upx;
+@uni-spacing-col-base: 16upx;
+@uni-spacing-col-lg: 24upx;
+
+/* 透明度 */
+@uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+@uni-color-title: #2C405A; // 文章标题颜色
+@uni-font-size-title:40upx;
+@uni-color-subtitle: #555555; // 二级标题颜色
+@uni-font-size-subtitle:36upx;
+@uni-color-paragraph: #3F536E; // 文章段落颜色
+@uni-font-size-paragraph:30upx;

src/uni.scss

@@ -1,76 +0,0 @@
-/**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
- */
-
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
-
-/* 颜色变量 */
-
-/* 行为相关颜色 */
-$uni-color-primary: #007aff;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
-
-/* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
-$uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
-
-/* 背景颜色 */
-$uni-bg-color:#ffffff;
-$uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
-
-/* 边框颜色 */
-$uni-border-color:#c8c7cc;
-
-/* 尺寸变量 */
-
-/* 文字尺寸 */
-$uni-font-size-sm:24upx;
-$uni-font-size-base:28upx;
-$uni-font-size-lg:32upx;
-
-/* 图片尺寸 */
-$uni-img-size-sm:40upx;
-$uni-img-size-base:52upx;
-$uni-img-size-lg:80upx;
-
-/* Border Radius */
-$uni-border-radius-sm: 4upx;
-$uni-border-radius-base: 6upx;
-$uni-border-radius-lg: 12upx;
-$uni-border-radius-circle: 50%;
-
-/* 水平间距 */
-$uni-spacing-row-sm: 10px;
-$uni-spacing-row-base: 20upx;
-$uni-spacing-row-lg: 30upx;
-
-/* 垂直间距 */
-$uni-spacing-col-sm: 8upx;
-$uni-spacing-col-base: 16upx;
-$uni-spacing-col-lg: 24upx;
-
-/* 透明度 */
-$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
-
-/* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:40upx;
-$uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:36upx;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:30upx;

vue.config.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const postcssPxToViewport = require('./postcss.config');
 const vueSrc = 'src';
 const CDN_URL = process.env.CDN_URL || '';
@@ -18,7 +18,7 @@ module.exports = {
         lessOptions: {
           // javascriptEnabled: true,
         },
-        additionalData: `@import "@/styles/common.less";`,
+        additionalData: `@import "@/styles/common.less"; @import "@/styles/uni.less";`,
       },
       // scss: {
       // 	// prependData: [path.resolve(__dirname, './src/uni.scss')],
@@ -26,9 +26,9 @@ module.exports = {
       // 		additionalData: `@import "~@/uni.scss";`
       // 	}
       // },
-      scss: {
-        additionalData: `@import "~@/uni.scss";`,
-      },
+      // scss: {
+      //   additionalData: `@import "~@/uni.scss";`,
+      // },
     },
   },
   pluginOptions: {