Taro: [Taro v3.0.0-alpha.5] 不同页面引入公共组件，CSS 不能正确打包

[molvqingtai]

问题描述

不同页面引入公共组件，组件能正常加载，但是 CSS 丢失，当把一个页面引入的公共组件注释，另一个页面则能正常显示

复现步骤

公共组件: @/common/header-bar.vue

<template lang="html">
  <view class="header" style="200px">
    <view class="header-logo"></view>
  </view>
</template>

<script>
export default {
  name: 'HeaderBar',
}
</script>

<style lang="scss">
.header{
  .header-logo{
    height: 80px;
    padding-top: 36px;
    background-color: #7562E1;
    border-bottom: 1px dashed #A094EC;
    position: relative;
    &::after, &::before{
      content: "";
      position: absolute;
      width: 110px;
      height: 44px;
      background-color: #A094EC;
      border-radius: 22px;
      bottom: 16px;
    }
    &::after{
      left: -30px;
    }
    &::before{
      left: 200px;
    }
  }
}

</style>

页面 1：pages/index/index.vue

  <view class="index">
    <header-bar></header-bar>
  </view>
    import HeaderBar from '@/common/header-bar.vue'
    export default {
      name: 'Index',
      components: {
        HeaderBar
      },
    }

页面 2：pages/order/order.vue

  <view class="order">
    <header-bar></header-bar>
  </view>
    import HeaderBar from '@/common/header-bar.vue'
    export default {
      name: 'Order',
      components: {
        HeaderBar
      },
    }

期望行为

正常打包组件 CSS

报错信息

CSS 样式丢失

系统信息

👽 Taro v3.0.0-alpha.5

Taro CLI 3.0.0-alpha.5 environment info:
System:
OS: macOS High Sierra 10.13.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.13.7 - ~/.nvm/versions/node/v12.11.1/bin/npm
npmPackages:
@tarojs/components: 3.0.0-alpha.5 => 3.0.0-alpha.5
@tarojs/taro: 3.0.0-alpha.5 => 3.0.0-alpha.5
eslint-config-taro: 3.0.0-alpha.5 => 3.0.0-alpha.5

[taro-bot[bot]]

CC @Chen-jj

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot[bot]]

CC @luckyadam

[Chen-jj]

@molvqingtai beta 最新版已经修复，可以更新后再试试

[taro-bot[bot]]

Hello~

您的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[liurenqiu520]

解决个鸡毛，我也出现这个问题了。

[zprial]

+1，v3.0.14还有这个问题

[HelloWorld20]

发现个情况，也许能帮助各位

入口文件必须有个css文件

webpack打包后会把公共css都抽离到根目录的common.wxss里。 然后都统一在app.wxss里@import "./common.wxss";如果源码里没有 app.less（假设用的less预处理器)，打包后也没有app.wxss，就会导致没有文件引入公共样式代码。 Taro也没给新建个'app.wxss'。

@taro-bot 建议自动生成app.wxss