从npm官网中搜索reset.scss，获取最新的reset.scss代码复制到本地文件中，出现了5处这样的警告提示，项目运行正常。但是我的强迫症发作了，必须要清除这些不速之客。通过deepSeek找到方法解决了。Mark一下！

在 Vue3 + TypeScript + SCSS 项目中，当你在 rest.scss 文件中使用 -webkit-appearance: none; 出现黄色波浪线警告时，这是因为现代 CSS 校验工具建议同时提供标准属性和浏览器前缀属性以确保最佳兼容性。以下是解决方案：

正确写法（推荐）：

scss

// 同时提供标准属性和带前缀的属性
.element {
  -webkit-appearance: none; /* 兼容 WebKit 内核浏览器 (Safari, 旧版 Chrome) */
  appearance: none; /* 标准属性 (现代浏览器) */
}

原因说明：

1. appearance 已是标准属性
   该属性已被纳入 CSS Basic User Interface Module Level 4 标准，现代浏览器（Chrome 84+、Firefox 80+、Edge 84+）已支持无前缀版本。

2. 兼容性策略

   • -webkit-appearance → 兼容旧版 WebKit 内核浏览器

   • appearance → 标准写法，面向现代浏览器

3. 工具链优化建议
   如果项目配置了 Autoprefixer，只需写标准属性即可自动添加前缀：

   scss

   .element {
     appearance: none; /* Autoprefixer 会自动添加 -webkit- 前缀 */
   }

额外建议：

1. 检查 Autoprefixer 配置
   在 package.json 或 .browserslistrc 中确保包含需要兼容的浏览器：

   json

   // package.json
   "browserslist": [
     "last 2 versions",
     "not dead",
     "> 0.2%"
   ]

2. 禁用警告（不推荐）
   如果坚持只写前缀属性，可在 VSCode 设置中关闭 CSS 校验：

   json

   // .vscode/settings.json
   {
     "css.lint.unknownProperties": "ignore"
   }

最终代码示例：

scss

// rest.scss
button, input, select, textarea {
  -webkit-appearance: none; 
  appearance: none;
  background: transparent;
  border-radius: 0;
  // ...其他重置样式
}

关键点：始终优先使用标准属性 appearance，并通过构建工具自动处理前缀，这是现代前端开发的最佳实践。