[Bug] Loss of CSS after build

[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

• docs/guide.md

# 指南

## 基本示例

初始化画布，并添加图形

<Demo1 />

::: details 点击查看代码
<<< ./docs/.vuepress/components/Demo1.vue
:::

• docs/.vuepress/components/Demo1.vue
  https://github.com/nashaofu/grender/blob/724cd858a305a4cc941a18d72fc29fbe5ddcdb32/docs/.vuepress/components/Demo1.vue#L76-L79

<style lang="stylus">
.demo1
  height 180px
</style>

What is expected?

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

What is actually happening?

The style in the component is lost after packaging

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

[nashaofu]

经过测试，我发现当在项目package.json中字段sideEffects为false时，打包后样式会丢失，这个问题可在
https://github.com/nashaofu/vuepress-bug 中重现。

解决方案

在css-loader配置项上加上sideEffects:true

{
  test: /\.css$/,
  sideEffects: true,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
}