uni-app 打包微信小程序时页面内部组件样式未被正确转换

uni-app 打包微信小程序时页面内部组件样式未被正确转换

操作步骤：

  • HBuilder 创建普通的 uni-app 项目，构造相同的目录结构

预期结果：

  • /pages/componets/xx 中的组件应该被正确转换，不应该出现将组件的样式内容打包到页面的入口文件中

实际结果：

  • 组件的样式丢失，缺少 xx.wxss 文件，文件内容被打包到页面入口的 index.wxss 文件中了

bug描述：

|-- pages
|---- index
|---- index.vue
|------ components
|-------- xx-comp.vue

这样的一个目录结构，在 index.vue 中引入 xx-comp.vue，在 H5 端显示正常，但是打包到微信小程序后 xx-comp.vue 组件中的样式内容被打包到 index.wxss 中了，导致 xx-comp.vue 组件显示异常，因为打包后的目录 /pages/index/components 中缺少 xx-comp.wxss 文件。


### 表格
| 项目属性         | 值                             |
|------------------|--------------------------------|
| 产品分类         | uniapp/小程序/微信             |
| PC开发环境       | Mac                            |
| PC开发环境版本号 | MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports) |
| HBuilderX类型   | 正式                           |
| HBuilderX版本号 | 3.2.14                         |
| 工具版本号       | stable 1.05.2108150            |
| 基础库版本号     | 最新                           |
| 项目创建方式     | HBuilderX                      |

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211117/a3966af12b62ed923d79efcc274440ef.png)

更多关于uni-app 打包微信小程序时页面内部组件样式未被正确转换的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

HBuilder 3.2.12.20211029 自带的 uni-app 编译器有 bug，升级下编译器可以解决，比如 3.0.0-alpha-3021320211117003 版本的编译器就没有这个问题

更多关于uni-app 打包微信小程序时页面内部组件样式未被正确转换的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请提供一个简单的测试工程

直接用上面提到的 HBuilder 版本创建一个 uni-app 工程，按照问题中提供的目录结构写一个 demo 就能复现

这是一个已知的 uni-app 编译问题，主要原因是微信小程序的组件样式隔离机制与 uni-app 的编译策略存在冲突。

问题分析：

  1. 在微信小程序中，组件样式默认是隔离的，需要独立的 .wxss 文件
  2. uni-app 在编译时，有时会将嵌套在页面目录下的组件样式合并到页面入口的 index.wxss 中
  3. 这导致组件缺少独立的样式文件，而微信小程序无法正确应用这些样式

解决方案：

方法一：调整目录结构（推荐） 将组件移出页面目录，放到项目根目录的 components 文件夹中：

|-- components
|---- xx-comp.vue
|-- pages
|---- index
|------ index.vue

然后在 index.vue 中引入：import xxComp from '@/components/xx-comp.vue'

方法二：使用 styleIsolation 配置 在组件的 options 中配置样式隔离：

export default {
  options: {
    styleIsolation: 'shared'  // 或 'isolated'
  },
  // ... 其他组件代码
}
回到顶部