uni-app import css会修改部分内容

uni-app import css会修改部分内容

项目信息 详情
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 all
HBuilderX类型 正式
HBuilderX版本 3.3.0
浏览器平台 Chrome
浏览器版本 all
项目创建方式 HBuilderX

操作步骤：

如上

预期结果：

如上

实际结果：

如上

bug描述：

style中@import css和js中require/import css
button会被转换为uni-button
例如：

.vgt-table thead th.sorting-desc button:before

变成了

.vgt-table thead th.sorting-desc uni-button:before

更多关于uni-app import css会修改部分内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app import css会修改部分内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，button标签被自动转换为uni-button是框架的预期行为。uni-app为了实现跨平台兼容性，会将部分HTML原生标签映射为自定义组件。

原因分析：

  1. uni-app在编译时会对模板中的标签进行转换，button会统一转为uni-button组件
  2. 这个转换不仅影响模板，也会影响通过@import或require/import引入的CSS选择器
  3. 这是为了确保样式在不同平台（特别是小程序平台）上能正确应用

解决方案：

  1. 直接使用uni-button选择器：修改CSS选择器为.vgt-table thead th.sorting-desc uni-button:before
  2. 使用全局样式：在App.vue的全局样式中定义相关样式
  3. 使用深度选择器：在Vue单文件组件中使用/deep/或::v-deep
    /deep/ .vgt-table thead th.sorting-desc button:before {
  /* 样式规则 */
}
回到顶部