Skip to content

[Bug] Loss of CSS after build #2350

Closed
Closed
@nashaofu

Description

@nashaofu
  • I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

1.git clone https://github.com/nashaofu/grender.git && cd grender && git checkout 724cd858a305a4cc941a18d72fc29fbe5ddcdb32 && yarn
2. Compile the source code: yarn build
3. run yarn docs:build
4. run npm i -g estatic
5. Start the http server locally: estatic docs/.vuepress/dist -b grender
6. Open in browser http://127.0.0.1:8080/grender/guide.html
7. The style of the rectangular area component in the figure is missing
image

  • docs/guide.md
# 指南

## 基本示例

初始化画布,并添加图形

<Demo1 />

::: details 点击查看代码
<<< ./docs/.vuepress/components/Demo1.vue
:::
<style lang="stylus">
.demo1
  height 180px
</style>

What is expected?

This is the effect when running vuepress dev docs, This is working fine.
image

What is actually happening?

The style in the component is lost after packaging
image

Other relevant information

  • Output of npx vuepress info in my VuePress project:
Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.14.1/bin/yarn
    npm: 6.14.3 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Browsers:
    Chrome: 81.0.4044.129
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1
  npmPackages:
    @vuepress/core:  1.4.1 
    @vuepress/theme-default:  1.4.1 
    vuepress: ^1.4.1 => 1.4.1 
  npmGlobalPackages:
    vuepress: Not Found

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions