Next.js组件化样式中部分SCSS属性使用报错如何解决

你遇到的是PostCSS自带的autoprefixer/Stylelint校验抛出的错误，触发原因是你手动编写了-webkit-、-moz-开头的厂商前缀CSS属性，当前项目的样式校验规则默认禁止手动写厂商前缀，会自动根据你配置的浏览器兼容范围自动补全对应前缀。

• 直接删除手动添加的前缀属性，仅保留标准属性即可，autoprefixer会自动处理兼容：

input[type="date"] {
  display: block;
  appearance: textfield;
  min-height: 1.2em;
}

• 如果你有特殊场景必须手动保留前缀，给对应代码行添加校验忽略注释即可：

input[type="date"] {
  display: block;

  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: textfield;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-appearance: textfield;
  min-height: 1.2em;
}

• 如果是导入全局styles.scss文件触发报错，全局排查所有手动编写的厂商前缀属性，统一替换为标准写法即可解决。

内容的提问来源于stack exchange，提问作者Hafiz Sabih Ul Hassan