收藏
回答

引入第三方组件库vant-ui后没有样式?

以前做过一个小程序,也是用的vant-ui,是没问题的。这次我使用了微信小程序云开发,引入组件以后,都没有样式。

代码结构如下

我是在 /minigrogram 目录下执行的 npm init 和 npm i @vant/weapp -S --production。

project.config.json 相关配置:

{
  "miniprogramRoot": "miniprogram/",
  "cloudfunctionRoot": "cloudfunctions/",
  "setting": {
    ...
      "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./miniprogram/package.json",
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ],
	...
  }
  "srcMiniprogramRoot": "miniprogram/",
  "compileType": "miniprogram",
  ...
}

引入组件的代码:

index.json
{
  "usingComponents": {
    "van-tab": "@vant/weapp/tab/index",
    "van-tabs": "@vant/weapp/tabs/index"
  }
}

index.wxml
<van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

预览是这样的:

没有任何样式生效:

不知道是不是哪里的配置有问题。

微信开发者工具版本:1.06.2209190

最后一次编辑于  2023-01-25
回答关注问题邀请回答
收藏

8 个回答

  • duck不必
    duck不必
    2023-05-22

    重启客户端即可

    2023-05-22
    有用 1
    回复
  • 涛子
    涛子
    04-23

    坑爹, 我的也是,没图标显示

    04-23
    有用
    回复
  • 问题不大
    问题不大
    2023-08-18

    太感谢了 重新构建npm样式就生效了!

    2023-08-18
    有用
    回复
  • -(:з
    -(:з
    2023-08-13

    我也是

    miniprogram/app.json: ["usingComponents"]["van-button"] 未找到

    2023-08-13
    有用
    回复
  • 山海
    山海
    2023-04-21

    需要先删掉以前构建的包 再重新构建样式就出来了

    2023-04-21
    有用
    回复
  • 枋叶.忘
    枋叶.忘
    2023-04-11

    这个问题真的是。。。。。。。

    2023-04-11
    有用
    回复
  • Mr. Simon
    Mr. Simon
    2023-02-21

    微信开发者工具 》 工具 》 构建npm 就有样式了


    2023-02-21
    有用
    回复 1
    • 咖喱给给
      咖喱给给
      2023-03-27
      已经构建了,还是没有样式
      2023-03-27
      回复
  • Mihansy
    Mihansy
    2023-02-17

    请问你解决了嘛?我也遇到这个问题了

    2023-02-17
    有用
    回复 1
    • Mr. Simon
      Mr. Simon
      2023-02-21
      微信开发者工具 》 工具 》 构建npm 就有样式了
      2023-02-21
      回复
登录 后发表内容