vue3+ts postcss-px-to-viewport 兼容第三方ui库

对于使用第三方 UI 库的情况，如果使用 postcss-px-to-viewport 进行适配，可能会导致 UI 库的样式出现问题。这是因为 UI 库中的样式可能没有经过适配，需要我们手动进行调整。

一种解决方案是使用 postcss-px-to-viewport-exclude 插件，该插件可以排除第三方 UI 库中的样式，不进行适配。具体使用方法如下:

1. 安装插件

npm install postcss-px-to-viewport-exclude -D

2. 配置 postcss.config.js

module.exports = {
  plugins: {
    'postcss-px-to-viewport-exclude': {
      viewportWidth: 375, // 视窗的宽度
      exclude: /(\/|\\)(node_modules)(\/|\\)/ // 排除 node_modules 目录下的文件
    },
    autoprefixer: {}
  }
}

3. 在需要适配的样式文件中使用 `/* no */` 注释来排除不需要适配的样式

/* 不需要适配的样式 */
.example {
  font-size: 16px; /* no */
}

/* 需要适配的样式 */
.example {
  font-size: 32px;
}

使用这种方法可以避免第三方 UI 库中的样式被适配，同时保证我们自己编写的样式能够正确适配。