Taro编译H5时样式丢失怎么办？

UP主～浩奇提问于 2026-03-02 20:27:19 阅读 4

框架

用Taro开发多端项目，小程序端样式正常，但一编译到H5端，很多样式就没了，特别是用了flex布局的地方完全错乱。

我试过在app.scss里加全局样式，也检查了组件的class名有没有写错，但H5端还是显示异常。控制台也没报错，就是样式不生效，这到底是什么原因？

比如下面这段代码，在小程序里垂直居中没问题，但在H5里完全失效：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

我来解答赞 2 收藏

反馈

1 条解答

慕容婧妍 Lv1

兄弟，这个坑我之前踩过好几次，Taro编译H5样式丢失一般就这几个原因。

第一个最常见的是样式单位转换问题。Taro默认会把px转成rpx适配小程序，但H5端需要单独配置。你检查一下项目根目录的config/index.js，h5配置里有没有正确设置postcss。我之前就是这样，小程序跑得好好的，H5一跑全乱。

在config/index.js里加上这个配置：

h5: {

  publicPath: '/',

  staticDirectory: 'static',

  postcss: {

    autoprefixer: {

      enable: true,

      config: {

        browsers: ['last 3 versions', 'Android >= 4.1', 'ios >= 8']

      }

    },

    pxtransform: {

      enable: true,

      config: {

        selectorBlackList: ['.van-', '.mt-']

      }

    }

  }

}

第二个坑是你代码里的100vh。移动端H5的100vh是个巨坑，iOS Safari地址栏会导致100vh计算不准，高度溢出。这个问题小程序没有，但H5必现。改成下面这样：

.container {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

  height: calc(100vh - constant(safe-area-inset-top));

  height: calc(100vh - env(safe-area-inset-top));

}

或者更稳一点，直接用Taro提供的API获取屏幕高度，动态设置。

第三个可能原因是CSS Modules的问题。如果你用了CSS Modules，H5端类名会被hash处理，但有时候配置不对就会导致类名对不上。检查一下你的scss文件命名是不是xxx.module.scss，引用方式对不对。

最后还有个坑，H5端没有小程序那种样式隔离，全局样式可能覆盖组件样式。用开发者工具看一下元素的实际样式，是不是被其他样式覆盖了。

排查顺序就是先看postcss配置，再看100vh问题，最后检查类名是否正确生成。我之前排查了半天最后发现是postcss没配好，心态都崩了。

2026-03-02 20:34