使用taro-plugin-html插件导致微信小程序原生标签样式被替换成.h5-类样式

[Bob0911]

相关平台

微信小程序

复现仓库地址

https://github.com/Bob0911/taro-plugin-html-issue

小程序基础库: 3.2.5 使用框架: Vue 3

复现步骤

npm install # 安装依赖 npm run build:weapp # 打包 打开dist/app.wxss 查看编译出来的css文件

期望结果

button { width: 100%; } input { width: 100%; }

实际结果

.h5-button { width: 100%; } .h5-input { width: 100%; }

环境信息

  Taro CLI 3.6.18 environment info:
    System:
      OS: Windows 10 10.0.22635
    Binaries:
      Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
      npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.18 => 3.6.18
      @tarojs/components: 3.6.18 => 3.6.18
      @tarojs/helper: 3.6.18 => 3.6.18
      @tarojs/plugin-framework-vue3: 3.6.18 => 3.6.18
      @tarojs/plugin-html: ^3.6.21 => 3.6.21
      @tarojs/plugin-platform-alipay: 3.6.18 => 3.6.18
      @tarojs/plugin-platform-h5: 3.6.18 => 3.6.18
      @tarojs/plugin-platform-jd: 3.6.18 => 3.6.18
      @tarojs/plugin-platform-qq: 3.6.18 => 3.6.18
      @tarojs/plugin-platform-swan: 3.6.18 => 3.6.18
      @tarojs/plugin-platform-tt: 3.6.18 => 3.6.18
      @tarojs/plugin-platform-weapp: 3.6.18 => 3.6.18
      @tarojs/runtime: 3.6.18 => 3.6.18
      @tarojs/shared: 3.6.18 => 3.6.18
      @tarojs/taro: 3.6.18 => 3.6.18
      @tarojs/taro-loader: 3.6.18 => 3.6.18
      @tarojs/webpack5-runner: 3.6.18 => 3.6.18
      babel-preset-taro: 3.6.18 => 3.6.18
      eslint-config-taro: 3.6.18 => 3.6.18

---

补充信息

期望button input textarea等 h5和小程序重名的标签 不要这样处理，元素选择器优先级低于类选择器，和tailwindcss之类的原子类一同工作时会导致tailwindcss的类名因为优先级问题导致不生效

[hanxinimm]

这个问题解决了吗？同问，怎么处理这个问题

[Bob0911]

我是这么处理的 写一个自定义插件，把不需要转换的样式 通过自定义插件 在最后打包完成的步骤里，把css注入到小程序的wxss文件中

[hanxinimm]

我是这么处理的 写一个自定义插件，把不需要转换的样式 通过自定义插件 在最后打包完成的步骤里，把css注入到小程序的wxss文件中

我也把原生标签input又复制了一遍 Input 首字母大写的方式，就没有被替换

[Bob0911]

我是这么处理的 写一个自定义插件，把不需要转换的样式 通过自定义插件 在最后打包完成的步骤里，把css注入到小程序的wxss文件中

我也把原生标签input又复制了一遍 Input 首字母大写的方式，就没有被替换

我没试过改大写的，当时觉得既然他要转换，我就等他处理完了再添加进去，你这样能解决也可以啊