和sass的冲突，导致打印时的布局和浏览器中显示的不一致

[TettyC]

用sass进行嵌套写法，打印预览中被标记元素的子元素布局会失效（已知：display：flex；text-align）。如以下代码，content和img应水平排布，当点击打印按钮时，打印预览中，img会被挤下来独占一行。

// 布局
<div class="container">
  ...
  <div id="printMe" class="print">
    <div class='content'>
      ...
    </div>
    <img src="./assets/logo.png" />
  </div>
  <button v-print="'printMe'">打印</button>
</div>

// 样式
<style lang="scss">
.container {
  .print {
    display: flex;
  }
}
</style>

此问题在vue2和3的版本中都得到复现，解决方法是不用嵌套写法。

<style lang="scss">
.print {
  display: flex;
}
</style>

如上述代码中样式改为以上代码，打印预览即可恢复正常布局。